This guide shows how to share your chatbot with a direct link, embed it on a web page with an iframe, and add it as a floating chat button (including WordPress steps).
1. Share Your Chatbot Link
Use your chatbot like a standalone website and share it with others. Your direct chatbot link is: https://ai.floraai.me/chatbot-iframe/bot-{yourbotidhere}
You can bookmark it in your browser, share it via email, social media, or messaging apps, or add it as a link or button on your website (e.g., "Open Chatbot").
2. Embed Your Chatbot with an iFrame
Use an iframe to show the chatbot directly on a page of your site. Paste this code into the HTML of the page where you want the chatbot (usually in the body):
Tips: Width 100% makes the chatbot fill the available width. Change 600px to fit your layout (e.g., 500px, 800px). Make sure your site allows iframes and doesn't block external content.
3. Add a Floating Chat Button to Your Website
Add this script inside the head tag of your website:
<script defer="" id="chatbot-script" src="https://cdn.aichatbotjs.com/chatbot.js" data-chatbot-id="bot-{yourbotidhere}"></script>
After adding it, a chat button will appear on your site so visitors can open the chatbot from any page.
4. Add the Chat Button in WordPress
In WordPress, you can add the script site-wide using a plugin.
In your WordPress dashboard, go to Plugins → Add New.
Search for Simple Custom CSS & JS, then click Install Now and Activate.
In the WordPress sidebar, click Simple Custom CSS & JS, then click Add Custom HTML.
Enter a name (e.g., "Chatbot Script") and paste the chatbot script into the main code area.
On the right, choose Header as the location.
Click Publish to save and apply.
After publishing, the chat button will appear on every page of your WordPress site.