JDoodle.ai docs

Appearance

General integration guide ​

What is an integration? ​

If you have already created a website design with jdoodle.ai, then congratulations!!

But building the site is just the beginning. To level up the functionality and make it do more, you may have to connect with a few external tools.

For example, you could use Mailchimp to collect emails, HubSpot to manage the contacts, or Airtable to store form submissions.

That is where integrations come in. jdoodle.ai lets you easily link these tools so they work together, without any technical hassle.

You can integrate it using:

  • API keys
  • Webhook
  • Or adding an embed

Integrate with API key ​

What is an API key? ​

API (Application Programming Interface) is a mechanism that enables two software components to communicate with each other and share information using a set of protocols. The API integrations automatically update the data between the two applications.

Some examples of API integrations are :

  • The weather app on the phone communicates to the system via API’s and shows daily weather updates on the phone.
  • Automatic data sync from the phone gallery to the cloud storage.

Integrate with Webhook ​

What is a webhook? ​

A webhook is a mechanism that allows one application to automatically send real-time information to another application when a specific event occurs, such as a form being submitted or a payment being made.

It is like a notification system, where instead of one tool repeatedly checking another for updates, a webhook pushes the data instantly when some action is taken, without you needing to refresh or check it manually.

Eg:

  • When someone fills in a contact form on your website, a webhook will instantly send that data to a Google Sheet or CRM, or in our case, to jdoodle.ai’s database.
  • When someone places an order through your app, the order details can be automatically sent to the inventory system.

Difference between API and Webhooks :

APIs usually wait for you to ask for data (in other words, they pull the data when requested) Webhooks send data as soon as it becomes available (in other words, they push it to the website or application).

Integrate with embed code ​

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.

E.g. of Embed code :

  • Youtube videos
  • Google maps
  • Typeform
  • Google reCAPTCHA
  • Social media feeds
  • Spreadsheets or even surveys

Benefits of including an Embed code :

  • There is no hosting required to add the embed code. The source of the content stays on the site, but gets displayed in the embedded site.
  • Any changes made to the source will reflect automatically.
  • The embed code improves the experience and makes the website more dynamic and interactive
  • Embedding a YouTube video, for instance, can improve the SEO of the website and increase the site's impressions.

Integrate with reCaptcha ​

Integrating Google reCaptcha is also similar to using a webhook.

Simply generate your site key by visiting this link. Then, paste the site key along with your prompt in the chat box and ask the AI to use it.

Verify that it's working correctly or provide additional refinement prompts if needed.

API Key–Based Integrations ​

Integrating a tool into your website or webpage has been made easier with JDoodle.ai. You can integrate the tools just by simple prompts. For example, if you want to connect a contact form with Mailchimp to automate the reply based on the request, you can just prompt and instruct the AI to integrate with the contact form. Now lets see the step by step to understand how this works.

What You’ll Do (Quick Flow) ​

Step 1: Create Your Page ​

Create the page according to your requirement by adding a relevant prompt.
For example, build a Contact Page, Landing Page, or Dashboard.

If you’re happy with the output, you can proceed to add integrations — simply by prompting JDoodle.ai.

Your prompt should clearly mention:

  • What page or element you’re integrating (e.g., “Contact form” or “Chat widget”)
  • Which API or service you’re connecting (e.g., Mailchimp, Gemini, Slack)

Example Prompts:

“Add a contact form on this page that collects name, email, and message. Connect it to Mailchimp so that when someone submits the form, their email is saved in my Mailchimp list.”

or

“Add a small chatbot in the corner that can answer questions using Gemini AI.”

JDoodle.ai will automatically generate and wire the integration into your page.
No manual coding is required.

Step 2: Add Your API Credentials ​

Once you receive the response from JDoodle.ai, follow these steps to add your API credentials:

  1. Go to “Secrets”
    At the top of your project dashboard, click on the Secrets tab.
    (You’ll also find the same instructions in the JDoodle.ai dialogue box.)

  2. Locate the Dummy Keys
    You’ll see sample or “dummy” keys that indicate where to paste your actual API credentials.

    • For Mailchimp, you might see: MAILCHIMP_API_KEY
    • For Gemini, you might see: GEMINI_API_KEY

  3. Replace with Your Real Keys
    Delete the dummy value using backspace, then paste the actual API key obtained from your service provider.

  4. Save Your Changes
    Click the Save icon located in the top-right corner of the screen.

Step 3: Test Your Integration ​

  1. Publish or Preview your page.
  2. Submit a test entry or trigger the event.
  3. Go to the Database section to verify if the input appears in the fields.
  4. Check success and error messages to ensure everything works as expected.

Supported Integrations ​

The same workflow applies to all API integrations — from simple email automations to AI assistants and notification tools:

  • Email Services: Mailchimp, SendGrid
  • AI Assistants: Gemini
  • Notification Tools: Slack, Discord, Webhooks

No coding required. Just describe what you want — JDoodle.ai handles the rest.

FAQs - Frequently Asked Questions ​

I added an integration but don’t see any API keys in the Secrets section. What do I do? ​

Sometimes the AI might take a little longer to set up the keys.
You can try the following:

  • Refresh your page.
  • If the dummy keys still don’t appear, prompt the AI and ask:

    “Why are my API keys not appearing in the Secrets section?”

What kinds of integrations can I add with JDoodle.ai? ​

You can connect almost any tool that helps your website work better.

Examples:

  • Mailchimp – Collect form entries and add them to your email list.
  • SendGrid – Send automatic emails when someone fills out your form.
  • Gemini or ChatGPT – Power chatbots or smart assistants on your site.
  • Slack – Send instant alerts when a form is submitted.

What are “dummy API keys”? ​

Dummy keys are placeholders that show the AI where your real keys should go.
You’ll find them in the Secrets section.
Replace them with your actual API keys from the connected service.

How do I find my real API keys? ​

Each external service (like Mailchimp or Gemini) provides an API key for integration.
You can find step-by-step instructions for several popular integrations in our documentation.

If you’re unable to locate your keys, feel free to email us — we’re happy to help.

What if I replace the wrong thing or make a mistake? ​

No worries. You can use the Roll Back option in your project to return to a previous step.

My integration doesn’t seem to work. What should I check? ​

Here’s a quick checklist:

  • You replaced all dummy keys with your real keys.
  • You saved your changes in Secrets after editing.
  • You refreshed or previewed your page after making updates.

If it still doesn’t work, ask the AI directly:

“Please check why my integration isn’t working.”

The AI will review your setup and guide you on the next steps.