SDK installation

Before you start#

1. You need an agency account and the Website widget page in the agency portal. Only owners can register websites.
2. In the Install tab (see the Widget Studio field reference), register your website's domain (for example youragency.com). Subdomains such as www.youragency.com are covered automatically.
3. Copy the snippet shown for that environment. It already contains your public key.

Script tag (supported today)#

Paste this where you want the widget to load, usually just before </body>. Replace the key with yours:

<script
  src="https://recent-visit.com/widget/1/widget.js"
  data-key="rvk_AAAAAAAAAAAAAAAAAAAAAAAA"
  async
></script>

That is all. The widget adds a launcher button to the page; nothing else is needed. The look and wording come from the Widget Studio.

Optional attributes#

data-api-base is the only way to set the address from a tag; apiBase inside data-config is overridden. The widget starts by itself when the tag has a valid data-key. If the key is malformed it logs Recent Visits: invalid key to the browser console.

Subresource Integrity (optional)#

The hash of the current file is published next to it at /widget/1/widget.js.integrity.txt. Use it if you want the browser to refuse a changed file:

<script
  src="https://recent-visit.com/widget/1/widget.js"
  data-key="rvk_AAAAAAAAAAAAAAAAAAAAAAAA"
  integrity="sha384-REPLACE_WITH_THE_PUBLISHED_HASH"
  crossorigin="anonymous"
  async
></script>

Next.js and React#

Until the package is published, load the script with Next.js's Script component (a client or server component). The widget needs a browser, so do not initialise it during server rendering:

import Script from 'next/script'

export function RecentVisitsWidget() {
  return (
    <Script
      src="https://recent-visit.com/widget/1/widget.js"
      data-key={process.env.NEXT_PUBLIC_RECENT_VISITS_KEY}
      strategy="afterInteractive"
    />
  )
}

Put NEXT_PUBLIC_RECENT_VISITS_KEY=rvk_… in your environment. It is a public key and is safe to expose in browser code. Render the component once, in your root layout. If your site is a single-page app, include the script only once; it ignores a second init.

Local development#

For development use the Test environment:

1. Register localhost as the Test website's domain (any port works).
2. Copy the Test snippet. For a local Recent Visits server it contains the address to use:

<script
  src="http://localhost:3000/widget/1/widget.js"
  data-key="rvk_AAAAAAAAAAAAAAAAAAAAAAAA"
  data-api-base="http://localhost:3000"
  async
></script>

3. Open your page at http://localhost:<port>. The widget shows a Test mode bar, shows your saved draft, and does not deliver chats or quote requests to your inbox.

Production#

1. Register your live domain on the Production environment and copy its snippet (a different key from Test).
2. Publish your settings in the Widget Studio so production shows them (production shows only published settings).
3. Add the snippet to your live site and open it. See Agency integration for a go-live checklist.

npm package#

The widget is also built as an ES module package named @recent-visits/widget. It is not published to npm yet, so npm install @recent-visits/widget will not work today. Once it is published you would use it like this, and the API reference documents the same exports:

import { init } from '@recent-visits/widget'

const widget = init({ key: 'rvk_AAAAAAAAAAAAAAAAAAAAAAAA' })
widget.open()

Until then, use the script tag. If you need the package source for evaluation, ask partners@recent-visit.com (opens in a new tab).

Browser support#

The widget is plain JavaScript with no dependencies and runs inside a Shadow DOM. It has been tested in automated browser tests on Chromium and WebKit (Safari engine) and on a phone-sized viewport. It has not been formally tested in Firefox. It needs a modern browser with fetch, Shadow DOM and sessionStorage.

Content Security Policy#

If your site sends a Content-Security-Policy header you must allow the widget. See Security and privacy.