> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pepline.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Install on your platform

> Where the one script tag goes on Webflow, Framer, HubSpot, Wix, Squarespace, Shopify, WordPress and a React app, and how to check it runs.

## One tag, every page

The Share page writes your tag. It looks like this, and it goes right before `</body>` on every page, so put it in the shared layout, template or footer your platform offers:

```html theme={null}
<script src="https://app.pepline.ai/widget/pepline.js"
  data-agent-public-key="pk_…"
  async></script>
```

Three things hold on every platform:

* **The key is public.** Requests are origin-checked instead: the site's domain must be listed under the agent's Guardrails › Allowed domains, or the widget stays silent on that site.
* **Nothing else on the page is needed.** The launcher renders itself. Only the inline mode needs a container, and only your own buttons need an attribute ([Embed options](/guides/embed-options)).
* **No cookies.** The widget keeps a visitor's conversation in the browser's own storage so it survives a reload, and nothing else. It does not need a consent trigger.

## Where the tag goes

<Tabs>
  <Tab title="Webflow">
    1. Open the site's **Site settings**, then the **Custom code** tab.
    2. Paste the tag in **Footer code**.
    3. Save, then **Publish** the site.

    Custom code needs a paid site plan on Webflow. On the free plan, share the link instead (below).
  </Tab>

  <Tab title="Framer">
    1. Open **Site settings** from the project, then **General**.
    2. Scroll to **Custom code** and paste the tag in **End of `<body>` tag**.
    3. Save and **Publish**.

    Custom code needs a paid site plan on Framer.
  </Tab>

  <Tab title="HubSpot">
    1. In HubSpot, open **Settings**, then **Content › Pages** (older accounts: **Website › Pages**).
    2. Pick the domain in **Choose a domain to edit its settings**.
    3. Under **Templates**, paste the tag in **Site footer HTML**.
    4. Save. Every page on that domain picks it up on its next render.

    If a HubSpot chat widget is already on the site, turn its targeting off for the pages that carry pepline so the two launchers do not overlap.
  </Tab>

  <Tab title="Wix">
    1. Open the site's dashboard, then **Settings › Custom code** (under Advanced).
    2. Click **Add custom code**, paste the tag and name it.
    3. Add it to **All pages**, placed in **Body - end**.
    4. **Apply**, then publish the site.

    Custom code needs a premium plan with a connected domain on Wix.
  </Tab>

  <Tab title="Squarespace">
    1. Open **Settings › Advanced › Code injection** (on 7.1 sites: **Website › Website tools › Code injection**).
    2. Paste the tag in **Footer**.
    3. Save.

    Code injection needs a Business plan or higher on Squarespace.
  </Tab>

  <Tab title="Shopify">
    1. In the admin, open **Online store › Themes**, then **Edit code** on the live theme.
    2. Open `layout/theme.liquid` and paste the tag right before `</body>`.
    3. Save.

    Shopify's checkout pages do not run theme code. The widget shows on storefront pages only.
  </Tab>

  <Tab title="WordPress">
    The plain route is a snippet plugin:

    1. Install **WPCode** (free) from Plugins.
    2. Open **Code Snippets › Header & Footer** and paste the tag in **Footer**.
    3. Save changes.

    Without a plugin: **Appearance › Theme file editor**, open `footer.php` of your child theme and paste the tag before `</body>`. Page builders have their own slot too: Elementor under **Elementor › Custom code**, Divi under **Theme options › Integration › body**.
  </Tab>

  <Tab title="Next.js / React">
    Next.js, in the root layout:

    ```tsx theme={null}
    import Script from "next/script"

    export default function RootLayout({ children }) {
      return (
        <html>
          <body>
            {children}
            <Script
              src="https://app.pepline.ai/widget/pepline.js"
              data-agent-public-key="pk_…"
              strategy="afterInteractive"
            />
          </body>
        </html>
      )
    }
    ```

    Every option is a `data-*` prop on the same element. Plain React or Vite: paste the tag in `index.html` before `</body>`.

    Single-page apps work as is. The widget follows in-app navigation and keeps the conversation open across routes.
  </Tab>
</Tabs>

## Check it runs

Open the site in a browser. The launcher sits bottom-right (or wherever the tag's options put it).

The Share page's **Code** tab turns from **Not seen yet** to **Seen on your-domain.com** once a visitor's browser has loaded the tag on your site. Previews inside the pepline dashboard and the hosted chat page never count.

Nothing after a minute? Check, in order: the site is published, the tag is in the footer of the page you opened, and the domain is in the agent's allowed domains.

## Can't add code yet?

Every agent has a hosted page, **Share the link** on the Share page. Put that link in a button, a menu item or an email signature: same agent, same conversations, no code on the site.

Or reply to the mail we sent you when we handed the agent over, invite us as a collaborator on your site, and we install it for you.

## Letting an assistant do it

The Share page's **Copy as AI prompt** button copies the tag together with these instructions. Paste it into Claude Code, Cursor or whichever assistant edits your code, and it places the tag in the right layout file.
