How to Seamlessly Integrate Chatbot Builder AI on ClickFunnels

To embed the Chatbot Builder AI Webchat widget on ClickFunnels, follow these steps:

1. Obtain the web chat code from the Chatbot Builder AI platform. You can find this by going to the "Settings" > "Channels" > "Web Chat" section and selecting the web chat you want to use.

2. In ClickFunnels, create a new "Custom HTML & JavaScript" block and paste the web chat code into it.

3. Note that ClickFunnels may have some platform-specific requirements for the web chat code. If you encounter any issues, refer to the Chatbot Builder AI documentation for guidance on how to modify the code for ClickFunnels.

4. After pasting the code, be patient and wait 10 minutes for the changes to be reflected on your ClickFunnels page. This is a known limitation of the platform.

5. If you want to further customize the web chat widget, such as adding a text bubble above the chat button, you can use a service like Anthropic's Claude to generate the necessary code for you. Provide the service with your requirements, and it will provide you with the modified code to use.

6. Once you have the customized code, simply replace the original web chat code in the ClickFunnels "Custom HTML & JavaScript" block with the new code, and the changes will be reflected on your page after the 10-minute wait period.

By following these steps, you can easily embed the Chatbot Builder AI Webchat widget on your ClickFunnels pages, and even customize it to your liking without any advanced web development skills.

To customize the Chatbot Builder AI webchat widget and add a text bubble with specific styling, follow these steps:

1. Obtain the original webchat script code from the Chatbot Builder AI dashboard.
2. Use a service like Anthropic's Claude to generate the modified code with the desired text bubble and styling. Provide the following instructions:
   • "Here is the code of our webchat plugin script. What we need is for you to add a text bubble above the webchat button. The text should be: 'Hey if you have any questions, please ask them here'. The text should be quite narrow and mobile responsive, with a border radius of 16 pixels. The delay for the text display should be 5 seconds."
   • "Please also change the background color of the text bubble to white and add some space between the chat button and the text bubble."
3. The generated code will include the necessary HTML, CSS, and JavaScript to implement the customized webchat widget with the text bubble and styling.
4. In your website or platform (e.g., ClickFunnels), locate the appropriate section to paste the modified webchat code, such as a custom HTML/JavaScript block.
5. After updating the code, allow for a 10-minute delay before the changes are reflected on your live website or platform.
6. Refresh the page to see the customized webchat widget with the text bubble and styling.

In this section, we have discussed the process of installing the ChatbotBuilder AI web chat plugin on ClickFunnels. The key points are:

1. Obtain the web chat code from the ChatbotBuilder AI platform and paste it into the custom JavaScript and HTML block in ClickFunnels.
2. Be patient, as it can take up to 10 minutes for the changes to reflect on the ClickFunnels page.
3. To customize the web chat widget further, you can use a service like Clowd.ai to add a text bubble above the chat button, change the background color, and adjust the spacing.
4. By following these steps, you can easily integrate the ChatbotBuilder AI web chat plugin into your ClickFunnels pages without any advanced web development skills.