image
615
blog

How to Integrate a Website Chatbot Into Your WordPress Site


What is Native Website Chatbot?

Native website chatbots are automated conversational agents that are integrated into the website to allow users to communicate with them without leaving the site or using any other external applications. Such chatbots can assist in real time, answer questions, guide users through processes, and ultimately enhance the user experience, right from one's website.

BotSailor introduced its Native Website Chatbot for website feature recently. This is the most awaited feature with which you can add a chat widget to your website landing page and attend those customers from BotSailor Webchat’s Live Chat Option. This is a free chatbot for website that you can integrate by following a few steps.  We will be going through each step on how to connect BotSailor WebChat to your Website.

Step One (Connect Your Website):


First of all, navigate to the Webchat’s Connect Website option from BotSailor dashboard and click on Connect Website as you can see on the screenshot. It will take you to the webchat configuration menu.


Now, provide a suitable title for your chat box and copy your website URL and paste it. Let's configure the Theme Background, Theme Color. We have selected a theme color as you can see #06efa9. Next, we have selected a suitable blue color for the Chat Bubble Background and You can also configure the Chat Bubble Color if you want. Then, you can select a Brand Logo that will be shown in the chatbox as well the Chatbox Wallpaper.

Up next, you have the privilege to manage the chatbox position and configure whether it will stay opened or closed on startup. We have selected Bottom-Left and Stay Closed.

Scroll down to you would like to fix X-Axis and Y-Axis positions for the chatbox on your landing page. Drag right the Loading Chatbox After section if you would like to have any time delay. 0 Second is selected as default. There is a drop down box if you would like to auto-delete your subscriber records. You can select weekly, bi-weekly, monthly, quarterly and half-yearly. As default we have kept Never to delete these. Now click on Connect. Wait for a while and your website should be connected successfully.


Step Two (Copy the JS Embed Code):


Now, click on Embed Code where you will find a dialogue box like above and copy the code from the top right corner.

**Here, we have used Webchat on a WordPress website but you can do it for Custom built and other platforms as well.


Step Three (Paste JS Embed Code to your Website):

Login to your Wordpress website and go to the dashboard. Click on the Homepage and select Visit Site.


Now click on the Home icon to set up the bot on the homepage. Then, click Edit with Elementor.

**Please be noted that we have selected the Home Page only and our chat widget will be visible only for this page. If you want it to be shown on the other pages; follow the same procedure.

**N.B: As Most of the Wordpress Websites use Elementor plugin as page builder, we have used this. For other page builders the process will be almost similar.



Search for Code from the left side in the Widgets section. Select the Shortcode widget; drag and drop inside any container in the page.

Now paste the embed code on the short code section from the left side. You can see the web chat box will appear. Publish the page to make it live.


Step Four (Check How it’s Work):