Floating Chatbot Setup

Introduction

The Floating Chatbot is a versatile feature of WPiko AI Chatbot that adds a chat icon to your website, allowing visitors to easily access the chatbot from any page. This implementation provides a non-intrusive way to offer AI-powered support to your site visitors.

Enabling the Floating Chatbot

1. Log in to your WordPress dashboard.
2. Navigate to WPiko AI Chatbot > Floating Chatbot.
3. Locate the “Enable Floating Chatbot” option.
4. Check the box next to “Enable Floating Chatbot” to activate the feature.
5. Click “Save Floating Chatbot Settings” at the bottom of the page.

Configuring the Floating Chatbot

Chatbot Floating Text

1. Find the “Chatbot Floating Text” field.
2. Enter the text you want to display next to the chat icon (e.g., “Chat with us”).
3. Leave this field empty if you prefer to display only the chat icon without text.

Exclusion Settings

You can choose to hide the floating chatbot on specific pages:

1. Scroll to the “Exclude Chatbot from Pages” section.
2. Check the boxes next to the pages where you don’t want the chatbot to appear:
   • Home Page
   • Posts Page
   • Article Pages
   • Cart Page (WooCommerce)
   • Checkout Page (WooCommerce)

Custom Page Exclusions

For more granular control:

1. Locate the “Custom Page Exclusions” text area.
2. Enter the URL paths of pages where you want to hide the chatbot, one per line.
3. Format, one per line:
   /about-us/
/contact-us/

Adjusting Chatbot Size

Customize the size of the floating chatbot container:

1. Find “Floating Chatbot Width (px)” and enter the desired width in pixels.
2. Set the “Floating Chatbot Height (px)” to adjust the height of the message area.

Appearance and Positioning

The floating chatbot appears as an icon in the bottom-right corner of your website by default. When clicked, it expands to show the full chatbot interface.

• Icon Position: Fixed at the bottom-right of the screen.
• Default State: Collapsed (showing only the icon and optional text).
• Expanded State: Full chatbot interface opens when the icon is clicked.

Mobile Responsiveness

On mobile devices, the floating chatbot adapts for a better user experience:

• Expands to full-screen width when opened.
• Height adjusts to fit the available screen space.

Best Practices

1. Concise Floating Text: If using text, keep it short and inviting.
2. Strategic Exclusions: Carefully consider which pages should not display the chatbot.
3. Size Optimization: Adjust the size to balance visibility and unobtrusiveness.
4. Test on Multiple Devices: Ensure the chatbot functions well on various screen sizes.

Troubleshooting

If the floating chatbot doesn’t appear:

1. Verify that the feature is enabled in the settings.
2. Check if the current page is excluded in your settings.
3. Inspect your website using browser developer tools for any JavaScript errors.
4. Clear your browser cache and refresh the page.

Customization Tips

• Consider matching the chatbot icon color to your website’s color scheme.
• Use clear, action-oriented text like “Need Help?” or “Chat Now” to encourage engagement.

By properly configuring the Floating Chatbot, you provide an accessible and unobtrusive way for visitors to get AI-powered assistance throughout their journey on your website.