Overview
The Floating Chatbot adds a chat button to a corner of every page. Visitors click it to open the chat window. It’s the easiest way to make your chatbot available across your whole site.
The floating chatbot switches on automatically after your first successful OpenAI connection. If it’s off and you haven’t added the shortcode anywhere, the Dashboard warns you that your chatbot isn’t visible on your site, with a button to turn it on.
Settings
Go to WPiko AI Chatbot → Chat Widget → Placement → Floating Chatbot. The settings are grouped into Display settings and Visibility & exclusions. Change any setting, then click Save Floating Chatbot Settings at the bottom of the page.
| Setting | What it does |
|---|---|
| Enable floating chatbot | Shows or hides the chat button across your site. |
| Icon position | Bottom Right (default), Bottom Left, Top Right or Top Left. |
| Floating text | Short text next to the icon, such as “Chat with us” (the default). Leave it empty to show only the icon. Its background color is set in Chat Widget → Appearance → Style. |
| Chat window size | Width of the chat window and height of the messages area on desktop, in pixels. Defaults: 380 × 620 px. |
| Hide on devices | Hide the floating chatbot on Desktop, Tablet and/or Mobile. |
| Exclude pages | Hide it on the Home Page, Posts Page, Article Pages, and the WooCommerce Cart or Checkout pages. |
| Custom page exclusions | URL paths to hide it on, one per line (for example /about-us/). |
What Visitors See
- Chat button: the icon (and optional text) in the corner you chose.
- Unread badge: if a reply arrives while the chat is closed, a badge on the icon shows how many new messages are waiting (up to “9+”).
- Expand / restore: a button in the chat header makes the window fill the whole browser window, and restores it to normal size. Works on desktop and mobile browsers.
- Proactive greeting: optionally, a greeting card can pop up next to the icon. See Proactive Greeting.
- On phones: the chat opens full screen with a close button.
The chatbot’s scripts and styles only load on pages where it’s shown, so excluded pages stay as fast as before.
Best Practices
- Keep the floating text short and inviting: “Need help?” or “Chat now”.
- Choose a corner that doesn’t cover other buttons, such as cookie banners or “back to top”.
- Consider hiding it on Checkout so customers can focus on paying.
- Test on desktop, tablet and phone.
Troubleshooting
- The chat button doesn’t appear: check that Enable floating chatbot is on, and that the page and device aren’t excluded. The Dashboard’s Configuration status also shows whether the chatbot is visible on your site.
- Only you can see it: until an OpenAI API key is saved, the chatbot is shown only to site admins.
- Changes don’t show: clear your caching plugin and browser cache.
- It overlaps other elements: try another corner, or adjust it with Custom CSS.
