GuideIntegrationsBubble
Bubble

Bubble Integration

Add your Chatsa chatbot to your Bubble application in just a few simple steps.

Step 1: Set Up Your Chatsa Chatbot

To integrate your Chatsa AI chatbot into your Bubble application, begin by logging into your Chatsa account. If you haven't already created an account, you can sign up for a free account. After signing in, you can configure your bot within the Chatsa platform by uploading relevant data sources, such as files, text snippets, websites, or question-and-answer pairs, which the bot can use to build its knowledge base.

Here is a step-by-step roadmap for successfully deploying your Chatsa chatbot.

Step 2: Generate and Copy Your Chatsa Chatbot Embed Code

  1. Every chatbot you create on Chatsa has a unique embed code you can use to embed it on your website. Once you've set up your chatbot on Chatsa, navigate to your Dashboard page, and select the specific bot you wish to integrate with your Bubble application.

    [Image Placeholder]
  2. Clicking on the bot should take you to the bot's playground page. From there, proceed to the Connect tab.

    [Image Placeholder]
  3. Up next, a new page should come up, click on Copy Script to copy the code snippet.

    [Image Placeholder]

Step 3: Embed Chatsa Chatbot on Your Bubble App

  1. Once you've copied your Chatsa embed code, sign into your Bubble account and head to your account dashboard.

  2. On your dashboard, pick out the Bubble app or website you wish to embed the chatbot on and click the Launch Editor button next to it.

    [Image Placeholder]
  3. Once your Bubble Editor comes up, scroll down to the section of the page you want to add the embed code.

  4. On the left sidebar of the editor, locate the HTML component and drag it to the section of the page.

    [Image Placeholder]
  5. Double-click on the HTML component to reveal the code editor.

  6. Paste the embed code on the editor and you should automatically see a floating chatbot icon on the bottom left corner of the editing canvas.

    [Image Placeholder]
  7. You can now preview your Bubble app to test your chatbot.

    [Image Placeholder]

Congratulations, your Chatsa chatbot is now live on your Bubble app!

Note: You can customize the appearance and colors of your bot on your Chatsa dashboard. To do this, go to your dashboard, choose a bot, click the Settings tab on the top of the page, and then click Chat Interface on the left sidebar to reveal the chatbot customization options.

Get Embed Code

Copy the embed code to add your Chatsa chatbot to your Bubble application