Comment on page
Adding Decagon to your website
Adding the Decagon to your website is just a few simple steps.
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.
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. If you want to pass in arbitrary metadata about the user, see here.
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: "[email protected]",
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.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: "[email protected]",
name: "John Doe",
});
}}
/>
{/* Rest of your page */}
</main>
)
}
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: "[email protected]",
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.Last modified 21d ago