Install with a script tag

A script tag adds a Web Agent to a site that has no build step. There are two snippets. JS / Auto starts the widget as soon as the page loads. JS / Manual loads the same code and waits for your call to Faustine.init, which you need to identify users or to start the widget after sign-in.

Before you begin

• The agent has a version served on the environment the page loads. Publishing the first version serves it on the release target, which is the first environment you selected in the wizard.

Add the auto-mount tag

To start the widget on every page that has the tag:

1. In the portal, go to Web Agents and select your agent.
2. In the Overview tab, find the Install the assistant card and select the JS / Auto tab.
3. Select Copy.
4. Paste the snippet into your site's HTML, before </body>.

<script src="https://webagent.faustine.ai/embed?wid=<AGENT_ID>" async></script>

The agent's launcher appears on the page when it loads.

The tag also defines window.Faustine. On a page installed this way, Faustine.open(), Faustine.close() and Faustine.toggle() control the panel. Faustine.identify has no effect, because an identity is applied by Faustine.init. To identify users, use the manual snippet.

Start the widget from your code

To decide when the widget starts:

1. On the Install the assistant card, select the JS / Manual tab.
2. Select Copy.
3. Paste the snippet into your site's HTML.

<script src="https://webagent.faustine.ai/loader.js"></script>
<script>
  Faustine.init({ agentId: '<AGENT_ID>' });
</script>

The first tag has no async attribute, so Faustine is defined when the second script runs. Nothing appears on the page until Faustine.init runs. Call it where it suits your app: after sign-in, after the user accepts cookies, or on certain pages only.

init returns a handle with identify, open, close, toggle, logout and shutdown. The same functions are on window.Faustine.

<script src="https://webagent.faustine.ai/loader.js"></script>
<script>
  const agent = Faustine.init({ agentId: '<AGENT_ID>' });

  fetch('/api/me')
    .then((res) => (res.ok ? res.json() : null))
    .then((me) => {
      if (me) agent.identify({ jwt: me.faustineJwt });
    });
</script>

/api/me stands for your own endpoint that returns the signed-in user with a token. To sign the token, see Verify your users with a signed token.

Load another environment

A page loads the Production environment by default, or the agent's first environment while it has no Production. To load another one, name it in the snippet.

Troubleshooting

Next steps

• JavaScript API: the options of init and the methods of the handle.
• Verify your users with a signed token: sign the token that identify sends.
• Use your own launcher button: open the panel from a button of your app.
• Installation: the other install methods.