Embedding the Widget

Install the chat widget after configuring and testing your AI Agent.

Copy the generated installation code

1. Open your Agent in the LoopReply dashboard.
2. Save and publish the configuration you want visitors to use.
3. Open Deploy and copy the installation code. It contains the Agent ID and its widget API key.
4. Add the code to your site’s shared layout or footer, once per page.
5. Confirm the Agent is active, then open your public website and send a test message.

The generated code uses the widget loader:

<script
  src="https://widget.loopreply.com/loader.js"
  data-agent-id="your-agent-id"
  data-api-key="your-widget-api-key"
  defer
></script>

Replace both example values with the values from Deploy. Use the Agent’s widget key, not a server credential or a third-party service key. If you configured allowed domains, include the website where the widget will run.

Choose the right installation method

• Widget installation covers HTML, Next.js, React, and website builders.
• Widget customization explains Classic and Portal types, shared appearance, translations, and publishing.
• Events and callbacks covers user fields and programmatic control.

Check the visitor experience

Test the published widget on desktop and phone. Ask a question covered by your knowledge sources, follow a workflow path, and test human handover if your plan and configuration include it. The dashboard preview can show draft changes, while the public widget uses the published configuration.

Last updated on October 9, 2026