To add an AI chatbot to your website, create the chatbot, copy its embed code, paste it into your site's HTML or website builder, and test it.
You can do it free: Wonderchat's free plan refills 50 AI replies every month, includes the website chat widget and needs no credit card. This tutorial walks through the 4 steps in Wonderchat, with instructions for HTML, Wix, Shopify, WordPress, Drupal and Webflow. If you build on Webflow, compare the best Webflow chatbots for support and leads before you choose one. 80% of Wonderchat agents that go live do so the same day. Wonderchat fits a small B2B team with real docs, such as a founder or a first support hire, because the agent answers only from the pages you connect and shows the source on every reply.
1. Create Your Chatbot
Before embedding, ensure you've set up your chatbot:
Access the Dashboard: Log in to your Wonderchat account.
Initiate Chatbot Creation: Click on the “+ Create Bot” button at the top right corner of the dashboard.
Fill in Basic Details: Provide your chatbot's name, tagline, and choose a color theme. A custom widget icon needs the Basic plan, and custom CSS needs Scale.
Train Your Chatbot: Add data sources like website links, files or Google Drive to give your chatbot the information it needs.
Customize Responses: Define the chatbot's role, set default language, and craft greeting and fallback messages.
For a detailed walkthrough, refer to the Creating Your First Chatbot guide.
2. Retrieve the Embed Code
Once your chatbot is ready:
Navigate to the Dashboard: In your Wonderchat account.
Access Embed Options: Click on the actions button (⋮) next to your chatbot and select “Embed to website”.
Copy the Embed Code: Choose between embedding as a Chat Widget or Chat Screen, then click “Copy to Clipboard”.
For more details, see How to Embed a Chat Widget.
3. Embed the Chatbot into Your Website
The embedding process varies depending on your platform:
For general HTML/JavaScript Websites:
Paste the copied embed code just before the closing
</body>tag of your HTML files.
For Wix based websites:
Log in to Wix Editor.
Add an HTML iframe to your site.
Paste the embed code into the iframe.
Adjust the iframe's size and position as needed.
Detailed steps are available in the Embedding for Wix guide.
For websites hosted on Shopify:
Log in to your Shopify admin panel.
Navigate to "Online Store" > "Themes".
Click "Actions" > "Edit code" for your current theme.
Locate the
theme.liquidfile.Paste the embed code just before the closing
</body>tag.
Refer to the Embedding for Shopify guide for more information.
For websites hosted on WordPress:
Log in to your WordPress admin panel.
Install and activate the "Header and Footer Scripts" plugin.
Navigate to "Settings" > "Header and Footer Scripts".
Paste the embed code into the "Scripts in Footer" box.
For a step-by-step guide, visit Embedding for WordPress.
For websites hosted on Drupal:
Log in to your Drupal admin panel.
Navigate to "Structure" > "Block layout".
Add a new custom block.
Paste the embed code into the block's content.
Assign the block to a region and configure visibility settings.
Detailed instructions can be found in the Embedding for Drupal guide.
For websites hosted on Webflow:
Log in to your Webflow account.
Navigate to the desired page in the Designer.
Add an "Embed" element to your page.
Paste the embed code into the Embed element.
See the Embedding for Webflow guide for more details.
4. Test Your Chatbot
After embedding:
Preview Your Website: Open your website to ensure the chatbot appears as expected.
Test the Agent: Ask the three questions customers ask most, then one your docs can't answer, to confirm it says it can't find the answer and offers a person.
Check Responsiveness: Verify that the chatbot displays correctly on various devices (desktop, tablet, mobile).
Once it's live, the agent answers from your content and shows the source; when no page covers a question, it says so, offers a person, and the question lands in your review inbox to answer once.
