Publishing Your Chatbot

Deploy your chatbot to your website with a simple JavaScript snippet. Your chatbot will be live in minutes.

Once you've configured and tested your chatbot, it's time to publish it to your website. Hyperleap provides a simple JavaScript snippet that works with any website platform.

Publishing Your Chatbot

1

Click Publish

In the chatbot editor, click the "Publish" button in the header. This opens the Website Integration dialog.

2

Enable Website Integration

Toggle "Enable Website Integration" to activate the embed code.

3

Add Your Domain

Add your website domain to the allowed domains list in organization settings. This is a security measure to prevent unauthorized embedding.

4

Copy the Embed Code

Copy the JavaScript snippet provided in the integration dialog.

Website Integration dialog showing embed code
The Website Integration dialog with JavaScript embed code

The Embed Code

The embed code looks like this:

<script>
(function () {
  // Define chatbot configuration
  window.userChatbotConfig = {
    chatbotId: "a5617384-0225-4c5a-9528-eefab4leald8",
    privateKey: "YTU2MTc...",
  };
  // Dynamically load chatbot plugin
  const chatbotScript = document.createElement("script");
  chatbotScript.src = "https://chatjs.hyperleap.ai/chatbot.min.js";
  chatbotScript.async = true; // Load asynchronously for better performance
  document.head.appendChild(chatbotScript);
})();
</script>

Installing on Your Website

Paste the embed code just before the closing </body> tag of your website. The exact method depends on your website platform:

WordPress

Via Theme Editor or Headers & Footers plugin

Shopify

Edit theme.liquid in Layout folder

Webflow

Project Settings → Custom Code

Wix

Settings → Custom Code → Body end

Squarespace

Settings → Code Injection → Footer

Custom HTML

Paste before </body> tag

WordPress

  1. Go to Appearance → Theme Editor (or use a plugin like "Insert Headers and Footers")
  2. Find your theme's footer.php file
  3. Paste the code before </body>
  4. Save changes

Shopify

  1. Go to Online Store → Themes → Edit Code
  2. Find theme.liquid in the Layout folder
  3. Paste the code before </body>
  4. Save

Webflow

  1. Go to Project Settings → Custom Code
  2. Paste in the Footer Code section
  3. Publish your site

Wix

  1. Go to Settings → Custom Code
  2. Click "Add Custom Code"
  3. Paste the code, select "Body — end" placement
  4. Apply to "All pages"
  5. Save

Squarespace

  1. Go to Settings → Advanced → Code Injection
  2. Paste in the Footer section
  3. Save

Custom HTML

Simply paste the code before </body> in your HTML file(s).

Tip:
The script loads asynchronously, so it won't slow down your page load. The chatbot appears once the script is fully loaded.

Domain Whitelist

For security, your chatbot only works on whitelisted domains. Add your domains inOrganization Settings → Allowed Domains.

Note:
Don't forget to add both your main domain and any subdomains (e.g., www.example.com and example.com) to the whitelist.

Preview vs. Production

  • Preview — Click "Preview" in the integration dialog to test on a temporary URL
  • Integration Docs — Click for detailed platform-specific guides

Verifying Installation

After adding the code to your website:

  1. Visit your website in a new browser tab
  2. Look for the chat button (usually bottom-right)
  3. Click it to open the chat widget
  4. Test a conversation to ensure everything works

Troubleshooting

Chatbot not appearing?

Check domain whitelist and code placement

Console errors?

Verify chatbotId and privateKey are correct

Styling issues?

Check for CSS conflicts with your site

Next Steps

Want to deploy your chatbot to messaging platforms? See Channels to connect WhatsApp, Instagram, and Facebook.