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

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.