Adding Decagon to your website

Adding the Decagon to your website is just 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.

It's highly recommended to make the User ID an unique unguessable value (like an UUID).

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.

NextAdvanced widget functionality

Last updated