RepligramDocs

Widget installation

Embed the Repligram chat widget on your site with a single script tag.

Embed snippet

In the dashboard, open your chatbot and go to Install. You will see a <script> that points to your deployment's widget.js, includes a data-bot-id for that bot, and sets data-origin to your site origin. Copy that exact line—IDs and origin must match your environment.

Where to place it

Paste the script in your HTML <head> or just before the closing </body> tag. Either is fine as long as the page loads the script on every route where you want the widget.

SPA and frameworks

For React, Vue, or other SPAs, add the script once in your root HTML template or via your framework's script injection so it is not duplicated on every client navigation. The widget attaches to the page globally.

Local development

If you run Repligram on localhost, use the same origin in data-origin as you use in the browser (including port). Production should use your canonical HTTPS domain.

Customization

Appearance (colors, position, etc.) is controlled from the bot's Customize tab, not by editing the script by hand.

Platform guides

The onboarding flow and the dashboard Install tab offer copy-ready snippets for the stacks below. Use the same script line from your bot; only the surrounding template changes.

HTML

Paste the single <script> line in your HTML <head> or just before </body> on every page where you want the widget.

Next.js

Use next/script with strategy="afterInteractive" once in your root layout (for example app/layout.tsx) so the loader is not duplicated on client navigations.

React

Mount the script once near the app root (for example in useEffect) and remove it on unmount if your shell requires it. Avoid inserting multiple copies on re-renders.

Vue

Create and append the script in onMounted and remove it in onUnmounted if you need a clean teardown.

WordPress

Add the snippet to your theme footer (for example before wp_footer() in footer.php) or use a plugin such as "Insert Headers and Footers" to paste into the footer section.

Shopify

In your theme, edit layout/theme.liquid (Online Store → Themes → … → Edit code) and place the script before </body>.

Webflow

Open Project Settings → Custom Code → Footer code and paste the script there so it loads on published pages.

See also: Integrations directory on the marketing site.