Documentation Index
Fetch the complete documentation index at: https://docs.trynavi.guide/llms.txt
Use this file to discover all available pages before exploring further.
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>
<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>
import { useEffect } from "react";
import { useRouter } from "next/router";
export default function App() {
const router = useRouter();
useEffect(() => {
// Load script dynamically
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/navi-web@latest/dist/navi-web.cdn.js';
script.defer = true;
script.onload = () => {
window.Navi.initUnifiedWidget({
agentConfigId: 'your-agent-config-id',
agentKey: 'your-agent-key',
runTool: (toolName, args) => {
if (toolName === 'navigate') router.push(args.url);
}
});
};
document.head.appendChild(script);
return () => {
if (document.head.contains(script)) {
document.head.removeChild(script);
}
};
}, [router]);
return <div>Your app content</div>;
}
<template>
<div id="app">Your app content</div>
</template>
<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
let scriptElement = null
onMounted(() => {
scriptElement = document.createElement('script')
scriptElement.src = 'https://cdn.jsdelivr.net/npm/navi-web@latest/dist/navi-web.cdn.js'
scriptElement.defer = true
scriptElement.onload = () => {
window.Navi.initUnifiedWidget({
agentConfigId: 'your-agent-config-id',
agentKey: 'your-agent-key',
runTool: (toolName, args) => {
if (toolName === 'navigate') router.push(args.url)
}
})
}
document.head.appendChild(scriptElement)
})
onUnmounted(() => {
if (scriptElement && document.head.contains(scriptElement)) {
document.head.removeChild(scriptElement)
}
})
</script>
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?
