ReplyOnSite

One line to add to your site

Install the widget

One script tag adds live chat to any website. Your license key is on the Widget page inside your workspace.

1. Any website (HTML)

Paste this immediately before the closing </body> tag on every page you want the widget to appear on.

html
<!-- ReplyOnSite live chat -->
<script>
  window.replyOnSiteSettings = { license: "YOUR_LICENSE_KEY" };
</script>
<script src="https://replyonsite.com/widget.js" async></script>

2. React and Next.js

Load it after hydration so it never blocks your first paint.

tsx
// app/layout.tsx (Next.js App Router)
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script id="replyonsite-config" strategy="afterInteractive">
          {`window.replyOnSiteSettings = { license: "YOUR_LICENSE_KEY" };`}
        </Script>
        <Script src="https://replyonsite.com/widget.js" strategy="afterInteractive" />
      </body>
    </html>
  )
}

3. Laravel

A Composer package with a Blade directive, the REST client and webhook verification. Passing the user signs the identity on your server - the secret never reaches the page.

bash
# Laravel - one Composer package
composer require replyonsite/laravel
php artisan vendor:publish --tag=replyonsite-config

# .env
REPLYONSITE_BASE_URL=https://replyonsite.com
REPLYONSITE_LICENSE_KEY=YOUR_LICENSE_KEY
REPLYONSITE_API_KEY=ros_sk_...
php
{{-- resources/views/layouts/app.blade.php, before </body> --}}
@replyOnSiteWidget

{{-- Or pass the signed-in user - the chat then knows who it is talking to,
     and the secure-mode signature is computed on the server for you. --}}
@replyOnSiteWidget(auth()->user())

4. Any other client (REST API)

Everything the widget does is available over HTTP, so any language can drive it. For JavaScript and PHP there are packages that wrap it; for anything else, the API is plain JSON with a bearer token.

ts
// Any JavaScript backend - Node, Next.js route handler, Deno, Workers
import { ReplyOnSiteClient } from '@replyonsite/sdk'

const replyonsite = new ReplyOnSiteClient({
  baseUrl: "https://replyonsite.com",
  apiKey: process.env.REPLYONSITE_API_KEY,
})

// Reply to a live chat from your own code
await replyonsite.sendMessage(conversationId, {
  body: "Your order shipped this morning.",
  authorName: "Order bot",
})

// Keep your users in sync - this is an upsert, so it is safe to repeat
await replyonsite.upsertContact({
  name: user.name,
  primaryEmail: user.email,
  externalId: user.id,
})

An API key is workspace-wide, so it belongs on your server and never in a browser. The widget needs no key at all.

5. WordPress and Shopify

  • WordPress: Appearance → Theme File Editor → footer.php, or use any “insert headers and footers” plugin and paste the snippet into the footer box.
  • Shopify: Online Store → Themes → Edit code → theme.liquid, paste before </body>.

6. Browser JavaScript API

Identify signed-in users so agents see who they are talking to, and control the widget from your own UI.

js
// Tell ReplyOnSite who the logged-in user is
window.ReplyOnSite.identify({
  name:  "Ada Lovelace",
  email: "[email protected]",
  phone: "+44 20 7946 0000"
})

// Open or close the widget programmatically
window.ReplyOnSite.open()
window.ReplyOnSite.close()
window.ReplyOnSite.toggle()

Widget not appearing?

  • Check the license key matches the one on your Widget settings page.
  • If you set a domain allowlist, make sure the site you are testing on is in it.
  • Confirm the script is not blocked by a content security policy.
  • Open the browser console and look for messages starting with [replyonsite].
Install the widget | ReplyOnSite