How To Add Chatbot Widget In Wordpress?

Brett Westwood
Brett Westwood2 minutes read
image

Great choice on adding a chatbot to your WordPress website! Chatbots can significantly enhance user experience and engagement. If you’re wondering how to seamlessly integrate one into your WordPress site, you’re in the right place. Today, we’ll walk you through the process step by step using ChatBuild.io.

Step 1: Sign Up on ChatBuild.io

Head over to ChatBuild AI and sign up for an account. Don’t worry; it’s quick and easy!

Step 2: Create Your Chatbot

Within the ChatBuild dashboard, you'll find intuitive tools to help you design and customize your chatbot. Begin by choosing a template that aligns with your website's goals and audience. You can then personalize the chatbot by adding your branding elements, customizing its conversation flow, and integrating specific features such as FAQs or product recommendations. Take your time to fine-tune the chatbot's settings until you're satisfied with its functionality and appearance.

Step 3: Get Your Script Tag

Once you've finalized the setup of your chatbot, it's time to obtain the script tag necessary for embedding it into your WordPress website. The script tag is a snippet of code provided by ChatBuild that allows your chatbot to communicate with your website's backend. It typically includes a JavaScript file hosted on ChatBuild's servers along with your unique API key.

Copy the script tag provided by ChatBuild, ensuring that you've selected the correct settings for your website's integration. This script tag will be inserted into the HTML code of your WordPress website to enable the chatbot's functionality. It should look something like this:

<div id="chatbot"></div>
<script src="https://cdn.jsdelivr.net/gh/bwestwood11/chatbot-widget/bundle/index1.js"></script>
<script>
    Chatbot.mount(document.getElementById('chatbot'), {
        api_key: "Your_api_Key"
    })
    Chatbot.loadCss("https://cdn.jsdelivr.net/gh/bwestwood11/chatbot-widget/bundle/index1.css")
</script>

Step 4: Add the Script to Your WordPress Page

Navigate to Pages > All Pages in your WordPress dashboard.

Edit The Page

  • Choose the page you want to add the chatbot to. For demonstration, let’s say it’s the “Sample Page.”
  • Click on Edit for the chosen page.

Add Script to the page

  • Click on Add Button at to top left corner
  • Select Custom HTML.
  • Paste the script tag you received from ChatBuild.io.

Publish

Look to the top right corner of the page editor; you’ll see a blue button labeled Publish or Update . Click on that to save your changes.

Step 5: Preview Your Site

Now that you’ve added the chatbot script to your page, it’s time to see it in action! Click on the Preview button to check out your website with the newly integrated chatbot.

And there you have it! With just a few simple steps, you’ve successfully added a chatbot to your WordPress website using ChatBuild.io. Enjoy engaging with your visitors in a whole new way!


#productivity#help#chatbots