Widget Embed Code

The popup widget adds a floating button to the corner of your page. When clicked, it opens a chat window that overlays your site content. During a call, visitors can minimize it to a small video tile in the corner while the agent keeps talking.

<script>
  window.VeloquenceWidgetConfig = {
    token: "YOUR_SHARE_TOKEN",
    mode: "popup",
    theme: "system",
    buttonColor: "#D4AF37",
    position: "bottom-right",
    width: 400,
    height: 650
  };
</script>
<script src="https://[your-subdomain].veloquence.ai/embed/veloquence-widget.js" defer></script>

The side panel opens from a tab on the right or left edge of the page into a full-height panel docked to that edge, with room for a live avatar. On wide screens the page makes room for it (set pushContent: falseto overlay instead); the panel's width is also set as --veloquence-push-right (or --veloquence-push-left) on the page root, so fixed headers can follow with right: var(--veloquence-push-right, 0px). The collapse button in the panel header folds it back to the tab. During a call, slides and media the agent shows open large beside the panel, and that header button (or the one on the call controls) minimizes the call to a small video tile in the corner: the agent keeps talking, presenting and pointing at your page. On phones it opens full screen.

<script>
  window.VeloquenceWidgetConfig = {
    token: "YOUR_SHARE_TOKEN",
    mode: "panel",
    theme: "system",
    buttonColor: "#D4AF37",
    position: "bottom-right",
    width: 400
  };
</script>
<script src="https://[your-subdomain].veloquence.ai/embed/veloquence-widget.js" defer></script>

The inline embed renders the chat interface directly inside a container element on your page, making it part of your page layout.

<div id="veloquence-embed" style="width: 100%; height: 600px;"></div>
<script>
  window.VeloquenceWidgetConfig = {
    token: "YOUR_SHARE_TOKEN",
    mode: "inline",
    theme: "system",
    container: "#veloquence-embed"
  };
</script>
<script src="https://[your-subdomain].veloquence.ai/embed/veloquence-widget.js" defer></script>

Use a standard iframe if you need full isolation from your page styles and scripts, or if your platform doesn't support custom JavaScript.

<iframe
  src="https://[your-subdomain].veloquence.ai/s/YOUR_SHARE_TOKEN"
  width="400"
  height="650"
  frameborder="0"
  allow="microphone; autoplay; encrypted-media; picture-in-picture; fullscreen"
  style="border: none; border-radius: 12px;"
></iframe>