Webflow Integration Guide
Learn how to add your Cloudpresser AI chatbot to your Webflow website.
Integration Steps
Adding your Cloudpresser AI chatbot to your Webflow website is straightforward:
Method: Using Custom Code
Webflow allows you to add custom code to your site:
- Get your chatbot code:
- Go to your Cloudpresser AI Chat dashboard
- Select the chatbot you want to integrate
- Click on the "View Code" or "Integration" button
- Copy the provided code snippet
- Add the code to your Webflow site:
- Log in to your Webflow account and open your project
- Click on the "⚙️" (Settings) icon in the left sidebar
- Go to the "Custom Code" tab
- Paste your chatbot code into the "Head Code" section
- Click "Save Changes"
- Publish your site to apply the changes
Tip: Adding the code to the Head section ensures the chatbot appears on all pages of your Webflow site.
Alternative Method: Page-Specific Integration
If you only want the chatbot on specific pages:
- Create a new custom code embed:
- In the Webflow Designer, click on the "+" icon in the left panel to add an element
- Search for "Embed" and drag it onto your page
- Click on the embed element to select it
- In the settings panel, click "Embed" and paste your chatbot code
- Click "Save" and then publish your site
Note: The embed method is not recommended for chatbots as it may cause the chatbot to appear only in a specific section of the page rather than as a floating button. Use the Head Code method whenever possible.
Webflow-Specific Considerations
Interactions with Webflow Animations
If your Webflow site uses complex animations or transitions, test the chatbot thoroughly to ensure it doesn't interfere with these elements.
Responsive Design
Webflow sites are often highly responsive. Test your chatbot on various device sizes to ensure it displays correctly on all screens.
Troubleshooting
Chatbot not appearing after publishing
Ensure you've published your site after adding the code. Changes in the Webflow Designer don't appear on your live site until published.
Chatbot appears in unexpected position
If you used the Embed method, the chatbot might be constrained to that element's position. Switch to the Head Code method for proper floating button behavior.
Z-index conflicts
If elements in your Webflow site appear on top of the chatbot, they might have a higher z-index. Contact support for assistance with z-index conflicts.
Need Help?
If you're experiencing issues with the Webflow integration, please contact our support team at [email protected].