Skip to main content

​
Quick Setup

Add this script tag to your HTML: 
<script src="https://cdn.jsdelivr.net/npm/navi-web@latest/dist/navi-web.cdn.js" defer></script>
Then initialize Navi when the page loads: 
<script>
  window.addEventListener("DOMContentLoaded", function () {
    Navi.initUnifiedWidget({
      agentConfigId: "your-agent-config-id",
      agentKey: "your-agent-key",
    });
  });
</script>

​
Framework Examples

  • HTML
  • React (CDN)
  • Vue (CDN)
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/navi-web@latest/dist/navi-web.cdn.js" defer></script>
</head>
<body>
  <h1>Your Website</h1>
  
  <script>
    window.addEventListener("DOMContentLoaded", function () {
      Navi.initUnifiedWidget({
        agentConfigId: "your-agent-config-id",
        agentKey: "your-agent-key",
        runTool: function(toolName, args) {
          if (toolName === "navigate") {
            window.location.href = args.url;
          }
        }
      });
    });
  </script>
</body>
</html>

​
CDN Providers

You can use either jsDelivr or unpkg:
  • jsDelivr: https://cdn.jsdelivr.net/npm/navi-web@latest/dist/navi-web.cdn.js
  • unpkg: https://unpkg.com/navi-web@latest/dist/navi-web.cdn.js

​
Sending User Context

Even before initialization, you can queue context messages: 
// Works immediately after script loads
Navi.sendUserContext("User viewing product #123");

// Send as user message (visible in chat)
Navi.sendUserContext("I need help", { silent: false });

​
What’s Next?