Chatbot

View All Docs
+

Getting Started (3)

+

Ai Configuration (6)

+

Woocommerce Integration (5)

−

Chatbot Implementation (3)

+

Customization (2)

+

Conversation Management (2)

+

Chatbot Menu Settings (4)

+

Security And Privacy (4)

Floating Chatbot Setup

Reading Time: 3 minutes

Overview

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

  • Log in to your WordPress dashboard.

  • Navigate to WPiko AI Chatbot > Floating Chatbot.

  • Locate the “Enable Floating Chatbot” option.

  • Check the box next to “Enable Floating Chatbot” to activate the feature.

  • Click “Save Floating Chatbot Settings” at the bottom of the page.

    • Configuring the Floating Chatbot

    Floating Icon Position

  • You can choose which side of the screen to display the floating chatbot icon.

  • Find the “Floating Icon Position” dropdown.

  • Choose left or right.

  • Click “Save Floating Chatbot Settings” at the bottom of the page.

    • Chatbot Floating Text

  • Find the “Chatbot Floating Text” field.

  • Enter the text you want to display next to the chat icon (e.g., “Chat with us”).

  • Leave this field empty if you prefer to display only the chat icon without text.

  • Click “Save Floating Chatbot Settings” at the bottom of the page.

    • Exclusion Settings

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

    • Scroll to the “Exclude Chatbot from Pages” section.

    • 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)

    • Click “Save Floating Chatbot Settings” at the bottom of the page.

    Custom Page Exclusions

    For more granular control:

    • Locate the “Custom Page Exclusions” text area.

    • Enter the URL paths of pages where you want to hide the chatbot, one per line.

    Format (one per line): 


       /about-us/
       /contact-us/

    • Click “Save Floating Chatbot Settings” at the bottom of the page.

    Adjusting Chatbot Size

    Customize the size of the floating chatbot container:

    • Find “Floating Chatbot Width (px)” and enter the desired width in pixels.

    • 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

    • Concise Floating Text: If using text, keep it short and inviting.

    • Strategic Exclusions: Carefully consider which pages should not display the chatbot.

    • Size Optimization: Adjust the size to balance visibility and unobtrusiveness.

    • Test on Multiple Devices: Ensure the chatbot functions well on various screen sizes.

    Troubleshooting

    If the floating chatbot doesn’t appear:

    • Verify that the feature is enabled in the settings.

    • Check if the current page is excluded in your settings.

    • Inspect your website using browser developer tools for any JavaScript errors.

    • 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.