Overview
The shortcode embeds the chatbot directly in a page or post, as part of your content, instead of (or as well as) the floating chat button. Use it for a dedicated support or FAQ page where the chat should be front and center.
Adding the Chatbot to a Page
Add this shortcode to a Shortcode block in any page or post:
[wpiko_chatbot]It also works in classic editor content and in text widgets in sidebars or other widget areas.
Shortcode Settings
Go to WPiko AI Chatbot → Chat Widget → Placement and open the Shortcode tab. It shows the shortcode to copy, and under Embed settings:
| Setting | What it does | Default |
|---|---|---|
| Chatbot width (px) | Maximum width of the chatbot container. It shrinks to fit smaller containers and screens. | 1280 |
| Chatbot height (px) | Height of the messages area. | 500 |
Click Save Shortcode Chatbot Settings to apply your changes.
Shortcode and Floating Chatbot Together
- On a page that contains the shortcode, the floating chatbot is hidden automatically, so visitors never see two chatbots.
- Use the shortcode once per page.
- Until an OpenAI API key is saved, the shortcode chatbot is visible only to site admins.
- If the floating chatbot is off, the Dashboard’s Configuration status shows which page has the shortcode, so you can confirm the chatbot is visible on your site.
Best Practices
- Add the chatbot to FAQ pages, product pages, support sections or landing pages, where it adds the most value.
- Introduce it with a short line of text, for example “Have questions? Our AI assistant is here to help!”
- Test it on different screen sizes to make sure it fits your page layout.
Customization
The shortcode chatbot uses the same look as the floating chatbot, set in Chat Widget → Appearance → Style. For page-specific changes, wrap the shortcode in a div with your own class:
<div class="custom-chatbot-wrapper">
[wpiko_chatbot]
</div>Then target .custom-chatbot-wrapper in your theme’s CSS or Custom CSS.
Troubleshooting
- The chatbot doesn’t appear: check that the shortcode is typed exactly as shown, with no extra spaces or characters, and that the page is published.
- Only you can see it: until an OpenAI API key is saved, the chatbot is shown only to site admins.
- It doesn’t work properly: check the browser console for JavaScript errors, and clear your caching plugin.
