Getting Started
Add Decagon to your website or application in a few simple steps
Step 1
Add the following single line of code to your HTML or React file:
<script src="<https://decagon.ai/loaders/[your_company].js>" />
This script tag will load the Javascript required to render the widget.
Step 2 (optional)
To identify a user, call this function when you obtain the user’s id or email. If the user is meant to stay anonymous, there’s no need to call this function.
window.duet.setUserId("<user id or email>")
That’s it! See below for some examples. Note that this is to identify the user on the frontend so that conversation history is preserved. If you want to pass in arbitrary metadata about the user, or use the user’s email for escalations, see here.
React Example
Insert the script tag in the JSX of the page(s) where you want to add the widget. Then, you may call window.duet.setUserId
wherever you fetch the user’s ID (likely in useEffect
).
export default function HomePage() {
useEffect(() => {
// ... get user's ID
// now call setUserId, while making sure window.duet exists
const script = document.getElementById("chat-loader");
if (script) {
script.addEventListener("load", () => {
// Set user info and metadata as you see fit
window.duet.setUserId(userId);
window.duet.setMetadata({
email: "john@example.com",
name: "John Doe",
});
});
}
}, [])
return (
<main>
<script src="https://decagon.ai/loaders/[your_company].js" id="chat-loader"/>
{/* Rest of your page */}
</main>
)
}
Make sure to use an event listener here to make sure you use window.duet
after it has loaded.
NextJS Example
This is very similar to React, but NextJS supports an onLoad
callback on scripts.
import Script from "next/script";
export default function HomePage() {
return (
<main>
<Script
src="https://decagon.ai/loaders/[your_company].js"
onLoad={() => {
// Set user info and metadata as you see fit
window.duet.setUserId("xxxxxxxxx");
window.duet.setMetadata({
email: "john@example.com",
name: "John Doe",
});
}}
/>
{/* Rest of your page */}
</main>
)
}
HTML Example
In HTML, simply add the script tag in your head element.
<!DOCTYPE html>
<html>
<head>
<title>Script Load Example</title>
<script>
// Define the function to run after the script loads
function scriptLoaded() {
// Set user info and metadata as you see fit
window.duet.setUserId("xxxxxxxxx");
window.duet.setMetadata({
email: "john@example.com",
name: "John Doe",
});
}
</script>
</head>
<body>
<h1>Script Loading Example</h1>
<!-- Include the Decagon script and use the onload event -->
<script src="https://decagon.ai/loaders/[your_company].js" onload="scriptLoaded()"></script>
</body>
</html>
Then you can call window.duet.setUserId
in your Javascript whenever you obtain the user’s id.
In case it’s helpful, we expose a window.duet.isReady()
function to let you check if the contents of the iframe have been fully loaded, but you shouldn’t need it. However, you will still need to make sure you have an event listener when when window.duet
itself is ready to use.