Add AI Agent to Your Website

Embed Script

The agent supports configured resources, contact links, custom branding, and visitor identity. Add this single script to your site:

<script src="https://app.marseil.ai/embed.min.js" project-id="<your_project_id>" async></script>

Get your project-id from the Settings page.

HTML

1. Embed the agent

Open your index.html and paste the script before the </head> tag:

<script src="https://app.marseil.ai/embed.min.js" project-id="<your_project_id>" async></script>

Replace <your_project_id> with your agent’s project ID.

2. Identify users (Optional)

<script>
  window.DOCS_AI = {
    userId: "u_id_1234xyt81qlgs",
    additionalFields: {
      userEmail: "user@example.com",
      name: "John Doe",
      userId: "clfp289qe0000mc0umct1zxeq",
      avatarUrl: "https://example.com/avatar.jpg"
    }
  }
</script>

Set the DOCS_AI object on the window whenever the page loads. It can only have two fields: userId and additionalFields.

Angular

1. Embed the agent

Open src/index.html and paste before </head>:

<script src="https://app.marseil.ai/embed.min.js" project-id="<your_project_id>" async></script>

2. Identify users (Optional)

import { Component, OnInit } from '@angular/core';

@Component({ selector: 'app-root', templateUrl: './app.component.html' })
export class AppComponent implements OnInit {
  ngOnInit() {
    (window as any).DOCS_AI = {
      userId: "u_id_1234xyt81qlgs",
      additionalFields: {
        userEmail: "user@example.com",
        name: "John Doe"
      }
    };
  }
}

React

1. Embed the agent

Install react-helmet:

npm i react-helmet
npm i --save-dev @types/react-helmet

In app.jsx / app.tsx:

import { Helmet } from "react-helmet";

function App() {
  return (
    <Helmet>
      <script src="https://app.marseil.ai/embed.min.js" project-id="<your_project_id>" async />
    </Helmet>
  );
}

2. Identify users (Optional)

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    window.DOCS_AI = {
      userId: "u_id_1234xyt81qlgs",
      additionalFields: {
        userEmail: "user@example.com",
        name: "John Doe"
      }
    };
  }, []);
}

Next.js

1. Embed the agent

In src/_app.jsx, add before </Head>:

<script src="https://app.marseil.ai/embed.min.js" project-id="<your_project_id>" async></script>

2. Identify users (Optional)

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    window.DOCS_AI = {
      userId: "u_id_1234xyt81qlgs",
      additionalFields: {
        userEmail: "user@example.com",
        name: "John Doe"
      }
    };
  }, []);
}

WordPress

Use the WPCode plugin:

1. Install and activate WPCode.
2. Go to Code Snippets → + Add Snippet.
3. Set Code Type to JavaScript Snippet.
4. Add your embed script and set insertion to Header.

<script src="https://app.marseil.ai/embed.min.js" project-id="<your_project_id>" async></script>

Other Builders (Webflow, Wix, Squarespace)

Any website builder that allows inserting <script> tags supports the Marseil AI embed.

Troubleshooting

Widget not visible: Check that the <script> tag is present in the HTML source.

Project not found: Verify your project-id is correct (from the Settings page).

Users not identified: Open browser DevTools → Console. After the chat icon appears you should see:

🤖 Intializing your chat Agent ...
⚙️ Agent chat loaded
⚙️ Agent chat body loaded

After clicking the icon:

⚙️ Sending to Internal Chat Agent { userId: "...", additionalFields: {...} }

If the log has no values, the window.DOCS_AI object is not set correctly.