Skip to content

How to embed chatbot to your website?

Chatbots have emerged as a powerful tool to achieve this, offering 24/7 assistance, lead generation, and an improved user experience. Kalp Studio provides an intuitive platform to create and manage these AI-powered assistants. Once you've designed your Kalp Bot, the next vital step is to integrate it into your website.

This guide will walk you through the simple process of embedding your Kalp Bot onto your website, making it accessible to your visitors.

Prerequisites:

  • A Kalp Studio account.

  • At least one chatbot created and configured within Kalp Studio.

  • Access to your website's HTML code.

Step 1: Log in and Navigate to Chatbots

  • Log into your Kalp Studio account.

  • From the main dashboard, locate the navigation panel on the left-hand side.

  • Click on the "Chatbots" option.

Step 2: Select Your Chatbot

  • You will be directed to the "Chatbots" page, where a list or grid of your created chatbots will be displayed.

  • Identify the chatbot you wish to embed.

  • Click on the card or entry for that specific chatbot to open its configuration settings.

Step 3: Access the Embedding Options

  • Once you're on the chatbot's configuration page, you'll find various customization options for its interface and sources.

  • Look for the "Embed on Website" button. This is located in the top-right corner of the chatbot settings interface, often near the chatbot ID.

Step 4: Copy the Embed Script

  • Clicking the "Embed on Website" button will trigger a pop-up modal.

  • This modal will display a snippet of HTML code. This code is a <script> tag specifically generated for your chatbot.

  • The modal will have a button, usually labeled "Copy Script" with a copy icon. Click this button to copy the entire script to your clipboard.

Step 5: Paste the Script into Your Website's HTML

  • Now, you need to add this copied script to your website's HTML code.

  • The most common and recommended practice is to paste this script just before the closing </body> tag in your website's HTML file(s). Placing it here ensures that your main page content loads first, potentially improving perceived page load speed.

Step 6: Test Your Embedded Chatbot

  • Once the script is added and your website changes are live, open your website in a browser.

  • The Kalp Bot chat widget should appear, usually in the bottom-right corner of the screen.

  • Interact with the chatbot to ensure it is functioning correctly, responding as configured, and displaying as expected.

Conclusion:

Embedding your Kalp Bot is a straightforward process that can significantly enhance your website's functionality and user engagement. By following these simple steps, you can provide instant, AI-powered support and interaction, helping you capture leads, answer queries, and guide users effectively.