Embed Chatbot on Your Website

Install and Mount

html

<link rel="stylesheet" href="https://cdn.cortexvia.in/chatbotsdk-web.css" />
<script src="https://cdn.cortexvia.in/chatbotsdk-web.iife.js"></script>
<div id="cv-chat"></div>
<script>
  window.ChatbotSDK.mount("#cv-chat", {
    chatbotKey: "ctx-cb-xxxxxxxxxxxxxxxx",
    config: {
      mode: "chatbot"
    }
  });
</script>

This is the simplest production embed. Load the latest CDN stylesheet and script, then call window.ChatbotSDK.mount() with your chatbot key.

When you customize the widget, keep the same embed shape shown here: use chatbotKey for your bot, then place display and behavior options inside config.

Load Latest CDN Files

html

<link rel="stylesheet" href="https://cdn.cortexvia.in/chatbotsdk-web.css" />
<script src="https://cdn.cortexvia.in/chatbotsdk-web.iife.js"></script>

Put both tags on the page once. The CSS file styles the widget UI, and the JS file mounts and runs widget logic. Use the plain CDN URLs directly; no manual version query is needed.

Common Configuration

html

<script>
  window.cvChatHandle = window.ChatbotSDK.mount("#cv-chat", {
    chatbotKey: "ctx-cb-xxxxxxxxxxxxxxxx",
    config: {
      mode: "chatbot",
      title: "Support Assistant",
      titleImageUrl: "https://cdn.example.com/brand/logo.png",
      titleImageLqipUrl: "https://cdn.example.com/brand/logo-lqip.jpg",
      showHeaderLogo: true,
      showUserAvatar: true,
      showAssistentAvatar: true,
      showIconTitle: true,
      iconTitleText: "Ask about Cortexvia",
      inputPlaceholder: "Ask anything...",
      showPoweredBy: false,
      onReady: function (event) {
      },
      userAvatarMode: "badge",
      styleOverrides: {
        widget: {
          wrapper: { zIndex: 9999 }
        }
      }
    }
  });
</script>

Use titleImageUrl to override the header logo per chatbot brand. Customize or disable the launcher tooltip pill with showIconTitle (or showTitleText) and iconTitleText (or titleText). Set showPoweredBy: false for cleaner branded embeds (free-tier bots keep Powered by locked on). Use onReady when your host page should keep its own loading state visible until widget init has fully completed.

Update and Unmount

html

<script>
  if (window.cvChatHandle) {
    window.cvChatHandle.update({
      chatbotKey: "ctx-cb-xxxxxxxxxxxxxxxx",
      config: {
        mode: "chat",
        inputPlaceholder: "Ask anything..."
      }
    });
  }
</script>

<script>
  if (window.cvChatHandle) {
    window.cvChatHandle.unmount();
    window.cvChatHandle = null;
  }
</script>

Next Embed References

Embed and Use

Place widget, update options, and remove it.

Config Reference

All public configuration keys.

Style Overrides

How to customize UI style safely.

Embed Troubleshooting

Quick checks when widget does not work.