Announcements

How To Add an AI Chatbot To Your Website [Step-by-Step Guide]

Vera Sun

Jun 5, 2025

Integrating an AI chatbot into your website can significantly enhance user engagement and provide instant support to your visitors.

To add an AI chatbot to your website, you'll typically use a chatbot platform that provides a code snippet or plugin to embed the chatbot widget on your pages. In this tutorial, we can show you how to add an AI chatbot to your website in 3 easy steps, which can be done within 5 minutes.

To start, you would have to pick an AI chatbot platform provider.

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.​

  • Train Your Chatbot: Add data sources like website links, files, or videos to equip your chatbot with the necessary information.​

  • Customize Responses: Define the chatbot's role, set default language, and craft greeting and fallback messages.​docs.wonderchat.io

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 Shopify:

  • Log in to your Shopify admin panel.​

  • Navigate to "Online Store" > "Themes".​

  • Click "Actions" > "Edit code" for your current theme.​

  • Locate the theme.liquid file.​

  • 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".​docs.wonderchat.io

  • 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.​

  • Interact with the Chatbot: Test its functionality to confirm it responds appropriately.​

  • Check Responsiveness: Verify that the chatbot displays correctly on various devices (desktop, tablet, mobile).​

By following these steps, you can seamlessly integrate a Wonderchat AI chatbot into your website, enhancing user engagement and providing real-time support.

The platform to build AI agents that feel human

© 2025 Wonderchat Private Limited

The platform to build AI agents that feel human

© 2025 Wonderchat Private Limited

The platform to build AI agents that feel human

© 2025 Wonderchat Private Limited