Connecting chatbot to Bubble

Integrating a Resinq chatbot into your Bubble application can significantly enhance user interaction by providing immediate automated support. This guide will walk you through the process of embedding your chatbot using JavaScript code in the global header of your Bubble application, ensuring it is available across all pages.

Prerequisites

Ensure you have the following before starting the integration process:

Log in to Resinq: Start by accessing your Resinq dashboard.
Select Your Chatbot: Choose the chatbot you wish to integrate from your list of chatbots.
Navigate to Embed Section: Click or tap on the Embed tab within your chatbot's settings.
Copy the Embed Code: Specifically for web integration, copy the HTML embed code provided for your chatbot.

Adding the Embed Code to Bubble

Embedding your Resinq chatbot into Bubble involves inserting a JavaScript snippet into the HTML header of your application:

Open Bubble.io Editor

Log into your Bubble.io account and open the editor for the app where you want to integrate the chatbot.

Access Settings

Navigate to the Settings tab on the left-hand side of the editor.

Modify SEO/Metatags

Within the Settings menu, go to the SEO/metatags subsection.

Insert Embed Code

Locate the Script/meta tags in header section.

Paste your Resinq embed code into this field to apply the chatbot across all pages of your application.

<!-- Paste your Resinq embed code below -->
<script src="https://newchat-ai-six.vercel.app/chatbot.js"></script>
<script>
  Chatbot.init({
    chatbotId: "clxelx9jx0001ghlho30v3qg3",
  });
</script>

Remember that scripts entered in this global section will affect every page in your app. If specific page implementation is needed, use individual page settings to insert the chatbot.

Best Practices

Test Changes: After integrating the chatbot, preview your Bubble app to ensure the chatbot functions as expected on various pages.
Global vs. Page Specific: Consider whether you want the chatbot on every page or only specific pages, and adjust your integration strategy accordingly.

Troubleshooting

If you encounter any issues after embedding your chatbot, here are some solutions:

Chatbot Not Displaying

Chatbot Impacting Page Load

Script Errors

By following these steps, you can successfully integrate a Resinq chatbot into your Bubble application, enhancing the interactive capabilities and support offered to your site visitors.