{"id":5861,"date":"2025-04-03T11:32:15","date_gmt":"2025-04-03T09:32:15","guid":{"rendered":"https:\/\/wpiko.com\/docs\/\/\/shortcode-integration\/"},"modified":"2025-04-03T12:02:56","modified_gmt":"2025-04-03T10:02:56","slug":"shortcode-integration","status":"publish","type":"wpiko_docs","link":"https:\/\/wpiko.com\/docs\/chatbot\/chatbot-implementation-chatbot\/shortcode-integration\/","title":{"rendered":"Shortcode Integration"},"content":{"rendered":"\n

Overview<\/h2><\/div>\n\n\n\n

The Shortcode Integration<\/strong> feature of WPiko AI Chatbot allows you to embed the chatbot directly into specific pages or posts on your WordPress site. This method provides flexibility in placement and enables you to integrate the chatbot seamlessly with your content.<\/p>\n\n\n\n

Using the Shortcode<\/h2><\/div>\n\n\n\n

Basic Implementation<\/h2><\/div>\n\n\n\n

To add the chatbot to any page or post, simply insert the following shortcode:<\/p>\n\n\n\n

[wpiko_chatbot]<\/code><\/pre>\n\n\n\n
Where to Use the Shortcode<\/h2><\/div>\n\n\n\n
You can use this shortcode in various locations:<\/p>\n\n\n\n
    \n
  • Page or Post Content:<\/strong> Insert it directly in the content editor.<\/li>\n\n\n\n
  • Text Widgets:<\/strong> Add it to sidebars or other widget areas.<\/li>\n\n\n\n
  • Custom HTML Blocks:<\/strong> Use it within Gutenberg custom HTML blocks.<\/li>\n<\/ul>\n\n\n\n
    Configuring Shortcode Chatbot Settings<\/h2><\/div>\n\n\n\n
      \n
    1. Navigate to WPiko AI Chatbot > Shortcode Chatbot<\/strong> in your WordPress dashboard.<\/li>\n\n\n\n
    2. Here you can adjust settings specific to the shortcode implementation.<\/li>\n<\/ol>\n\n\n\n
      Adjusting Chatbot Size<\/h3>\n\n\n\n
        \n
      • Locate “Chatbot Width (px)”<\/strong> and enter the desired maximum width in pixels.<\/li>\n\n\n\n
      • Default:<\/strong> 1280px<\/li>\n\n\n\n
      • Note:<\/strong> The chatbot will be responsive and adjust to fit smaller containers.<\/li>\n\n\n\n
      • Set the “Chatbot Height (px)”<\/strong> to adjust the height of the messages area.<\/li>\n\n\n\n
      • Default:<\/strong> 500px<\/li>\n\n\n\n
      • Click “Save Shortcode Chatbot Settings”<\/strong> to apply changes.<\/li>\n<\/ul>\n\n\n\n
        Best Practices for Shortcode Implementation<\/h2>\n\n\n\n
        Strategic Placement<\/h3>\n\n\n\n
          \n
        • Consider adding the chatbot to FAQ pages, product pages, or support sections<\/strong>.<\/li>\n\n\n\n
        • Use it on landing pages<\/strong> to provide immediate assistance to potential customers.<\/li>\n<\/ul>\n\n\n\n
          Responsive Design<\/h3>\n\n\n\n
            \n
          • The shortcode chatbot is designed to be responsive, but ensure it fits well within your page layout.<\/li>\n\n\n\n
          • Test on various screen sizes to verify proper display.<\/li>\n<\/ul>\n\n\n\n
            Content Integration<\/h3>\n\n\n\n
              \n
            • Introduce the chatbot with surrounding text to explain its purpose to visitors.<\/li>\n\n\n\n
            • Example:<\/strong> “Have questions? Our AI assistant is here to help!”<\/em><\/li>\n<\/ul>\n\n\n\n
              Multiple Instances<\/h3>\n\n\n\n
                \n
              • You can use the shortcode multiple times<\/strong> on the same page if needed.<\/li>\n\n\n\n
              • Be mindful of user experience<\/strong> when placing multiple chatbots.<\/li>\n<\/ul>\n\n\n\n
                Avoid Overuse<\/h3>\n\n\n\n
                  \n
                • While versatile, avoid placing the chatbot on every page.<\/li>\n\n\n\n
                • Use it where it adds the most value<\/strong>.<\/li>\n<\/ul>\n\n\n\n
                  Customization Tips<\/h2>\n\n\n\n
                    \n
                  • The shortcode chatbot inherits styles<\/strong> set in the general Chatbot Style settings.<\/li>\n\n\n\n
                  • For page-specific customizations<\/strong>, you can wrap the shortcode in a div<\/code> with custom CSS classes.<\/li>\n<\/ul>\n\n\n\n
                    html\n<div class=\"custom-chatbot-wrapper\">\n    [wpiko_chatbot]\n<\/div><\/code><\/pre>\n\n\n\n
                    Then, add custom CSS targeting .custom-chatbot-wrapper<\/code> in your theme or custom CSS section.<\/p>\n\n\n\n
                    Troubleshooting<\/h2><\/div>\n\n\n\n
                    If the chatbot doesn’t appear or function correctly:<\/p>\n\n\n\n
                      \n
                    • Verify the shortcode is entered correctly<\/strong> with no extra spaces or characters.<\/li>\n\n\n\n
                    • Check if there are any JavaScript errors<\/strong> in the browser console.<\/li>\n\n\n\n
                    • Ensure the page\/post is published<\/strong> and visible to the intended audience.<\/li>\n\n\n\n
                    • Verify that the WPiko AI Chatbot plugin<\/strong> is activated and properly configured.<\/li>\n<\/ul>\n","protected":false},"featured_media":0,"menu_order":0,"template":"","wpiko_doc_product":[46],"wpiko_doc_category":[48],"class_list":["post-5861","wpiko_docs","type-wpiko_docs","status-publish","hentry","wpiko_doc_product-chatbot","wpiko_doc_category-chatbot-implementation-chatbot"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/wpiko.com\/wp-json\/wp\/v2\/wpiko_docs\/5861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpiko.com\/wp-json\/wp\/v2\/wpiko_docs"}],"about":[{"href":"https:\/\/wpiko.com\/wp-json\/wp\/v2\/types\/wpiko_docs"}],"version-history":[{"count":6,"href":"https:\/\/wpiko.com\/wp-json\/wp\/v2\/wpiko_docs\/5861\/revisions"}],"predecessor-version":[{"id":5916,"href":"https:\/\/wpiko.com\/wp-json\/wp\/v2\/wpiko_docs\/5861\/revisions\/5916"}],"wp:attachment":[{"href":"https:\/\/wpiko.com\/wp-json\/wp\/v2\/media?parent=5861"}],"wp:term":[{"taxonomy":"wpiko_doc_product","embeddable":true,"href":"https:\/\/wpiko.com\/wp-json\/wp\/v2\/wpiko_doc_product?post=5861"},{"taxonomy":"wpiko_doc_category","embeddable":true,"href":"https:\/\/wpiko.com\/wp-json\/wp\/v2\/wpiko_doc_category?post=5861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}