Adding a webchat widget to your WordPress website allows visitors to communicate with your business directly from your website. A properly configured wordpress chatbot can help businesses provide instant responses, improve visitor engagement, and create a smoother customer support experience.
With BotSailor, you can customize your chat widget and install it on WordPress in several ways. This makes it easier to create a branded chatbot for wordpress websites without requiring complex development work.
In this guide, you will learn how to configure the BotSailor webchat widget and connect it to your WordPress website using three different methods:
- Adding the embed code to the WordPress theme files
- Installing the widget with the WPCode plugin
- Adding the widget to a specific page with Elementor
A BotSailor wordpress chatbot integration allows website visitors to start conversations directly from your website while businesses can manage automated communication through the BotSailor platform.
Configure the BotSailor Webchat
Before connecting the webchat to WordPress, you must create and configure it from the BotSailor dashboard.
The configuration process allows you to customize your chatbot appearance, branding elements, position, and visitor interaction settings before adding the chat widget to your website.
Step 1: Open the Connect Account Section
Log in to your BotSailor dashboard and follow these steps:
- Go to the Connect Account section.
- Connect the Webchat.
- Click Create Live Chat Widget .
You can now begin configuring the appearance and behavior of your chat widget.
The Webchat option works as a website-based communication channel that allows businesses to add a chatbot wordpress solution to their existing website environment.
Step 2: Add the Display Information
Enter a display title for the chatbox.
Next, copy and paste the URL of the website where you want to install the webchat widget. Make sure that the URL is correct before continuing.
This website URL connects the BotSailor system with your WordPress website and prepares the wordpress chatbot for installation.
Step 3: Customize the Widget Colors
BotSailor allows you to customize the widget so that it matches your website branding.
You can change:
- Theme background color
- Theme text color
- Chat bubble background color
- Chat bubble text color
By default, the theme background and text colors may be set to white and black, while the chat bubble colors may be set to blue and white.
Choose colors that provide good readability and match your brand identity.
A customized chat widget helps maintain consistent branding across your website while improving the visitor experience.
Step 4: Upload Your Brand Logo
Click the Upload button and select a suitable brand logo.
You can hover over the information icon to check the recommended image format and dimensions before uploading the file.
Adding a logo helps visitors recognize your business when interacting with the BotSailor wordpress chatbot interface.
Step 5: Upload a Chatbox Wallpaper
You can also upload a background wallpaper for the chatbox.
Click the Upload button and choose your preferred image. Hover over the information icon to view the recommended wallpaper size and file format.
A clean and lightweight background image usually provides the best user experience.
Using an optimized wallpaper ensures that your chatbot loads quickly without affecting website performance.
Step 6: Choose the Chatbox Position
Select where the chat widget will appear on your website.
BotSailor provides four available position options. For example, you can place the widget in the bottom-left or bottom-right corner of the page.
Choose a position that does not cover important buttons, menus, or website content.
The correct placement of your chat widget ensures visitors can easily access support while browsing your website.
For businesses using a chatbot for wordpress , selecting the right position is important because floating widgets need to remain visible without interrupting the user experience.
Step 7: Set the Startup Status
Choose whether the chatbox should remain open or closed when a visitor first loads the website.
Keeping it closed by default is usually less intrusive, while opening it automatically may help attract more attention.
For a wordpress chatbot , startup behavior plays an important role in balancing visitor engagement and user experience. Businesses can decide whether they want the chatbot conversation window to appear immediately or allow visitors to open it when needed.
Step 8: Adjust the X and Y Position
Use the X-axis and Y-axis settings to adjust the widget's position from the selected corner.
This is useful when your website already has another floating element, such as a WhatsApp button, cookie notice, or accessibility tool.
Proper positioning helps prevent conflicts between multiple website elements and ensures that the chat widget remains accessible without blocking important sections of the website.
Step 9: Set the Loading Delay
You can choose how long BotSailor should wait before displaying the webchat widget.
You may set a custom loading delay or keep the default value.
A suitable loading delay can improve the visitor experience by allowing the webpage content to load first before showing the chatbot wordpress interface.
Step 10: Configure the Subscriber Auto-Delete Period
BotSailor may also provide an option to automatically remove subscriber information after a selected period.
Choose the appropriate time interval based on your customer-support requirements and data-management policy. You can also keep the default setting.
Managing subscriber information properly helps businesses maintain organized chatbot records while following their internal data-handling practices.
Step 11: Connect the Widget
After completing the configuration, click Connect to activate the chatbox.
Next, click the Embed Code option. Copy the entire code by clicking the copy icon in the top-right corner of the code box.
You can now install the widget on your WordPress website.
The embed code connects the BotSailor system with your website and enables the wordpress chatbot functionality across your selected pages.
Install Webchat by Editing the WordPress Theme Files
This method installs the webchat widget globally, meaning it should appear across your entire website.
Adding BotSailor through theme files is one way to connect a chatbot for wordpress websites. However, administrators should carefully follow each step because incorrect code placement can affect website functionality.
Log in to your WordPress dashboard and go to:
Appearance → Theme File Editor
On the right side of the screen, you should see a list of your theme files.
Step 2: Open the Footer File
Scroll through the theme files and select:
footer.php
This file normally contains the closing section of your WordPress theme.
The footer section is commonly used for adding scripts such as a chat widget because it allows the code to load throughout the website.
Step 3: Paste the BotSailor Embed Code
Scroll down inside the footer.php file and paste the BotSailor embed code near the bottom of the file.
It is generally best to place the code before the closing
