JDoodle.ai docs

Appearance

How to embed your projects in an exisiting website or web app ​

TL;DR

Embedding with JDoodle.ai is simple. You can build something (like a form, dashboard, or mini-app), copy the embed code, and paste it into your website. Embeds are mobile-friendly, and you can add anything from YouTube videos to signup forms. It makes your site more dynamic, interactive, and SEO-friendly without extra hosting or backend setup.

What is an embed code? ​

An embed code is a small piece of HTML or JavaScript that you can copy from another website and display the content or functionality directly on your website. It works like a bridge that displays videos, forms, maps, or social media posts without the need to host or build it ourselves.
Instead of rebuilding that content yourself, you can insert a small code snippet. This snippet loads the external tool, widget, or app directly within your site.

For example, you can embed

  • A Google Calendar in the events page
  • A Mailchimp form for signups
  • Google reCAPTCHA for safety for sign-ins and sign-ups

Why is including an embed a good idea? ​

  • There is no need for separate hosting. The embedded element will be hosted on the source platform, and we simply need to insert the embed code into your exisiting website.

  • If you are making any changes to the source, all you have to do is republish it, and the changes will be reflected in the embedded site.

  • Embeds make websites more dynamic and interactive by being able to include external content such as forms, or dashboards.

When should you use embed? ​

Embedding is great when you want to:

  • Add forms like newsletter sign-ups, event registrations, and customer feedback.

  • Display dashboards that have live data, charts, or interactive reports.

  • Can be used to highlight product launches, promos, and announcements.

  • We can include interactive widgets or tools to enhance the user experience.

Basically, the embed feature allows your website to include interactive sections without having to build them out from scratch.

Steps to embed the content ​

Embedding content from JDoodle.ai into an Existing Website:

With JDoodle.ai, you can build a simple form, a product launch announcement page, or a simple analytics tool and embed it into your existing website.

1. Log in to jdoodle.ai and build a simple form, like a newsletter signup or product enquiry form.

2. Once it's done, click on publish in the top right corner.

3. Once published, on the publish page, you will find an option called “Embed this project:”

4. You can copy the code and paste it into your existing website.

Here's what an embed code would look like:

Example:

html <body> <div data-pym-src='https://hcblzf.jdoodle.io'></div> <script src='https://www.jdoodle.ai/assets/jdoodle-pym.min.js' type='text/javascript'></script> </body>

FAQs ​

1. What types of forms can I embed with JDoodle.ai?

You can embed forms like contact forms, newsletter sign-ups, event registrations, and product inquiry forms. Once you create them in JDoodle.ai, they can be placed inside any website with a simple embed code.

2. Is the embed code mobile-friendly?

Yes. JDoodle.ai embeds are responsive, so forms or apps will adjust automatically to mobile, tablet, and desktop screens.

3. Do I need coding knowledge to use JDoodle.ai embeds?

No coding is required. JDoodle.ai generates an embed code for you. Just copy and paste it into your website’s HTML or CMS (WordPress, Wix, Webflow, etc.).

4. Will my embedded content update automatically if I make changes in JDoodle.ai?

Yes. Any updates you make to your form, dashboard, or app in JDoodle.ai will reflect. Once you’ve made your changes be sure to hit Republish.

5. Is embedding content with JDoodle.ai secure?

Yes. JDoodle.ai uses secure iframes/scripts, ensuring your embedded content runs safely while keeping your website secure.