Turn Your Website into an AI Agent

This guide covers every way to integrate Rover — from a single script tag to framework-specific npm setups. Watch the walkthrough above to see the end result.

Prerequisites

• A website you control
• A Rover Workspace account (sign in with Google)
• Your Site ID and public key (pk_site_*) from the Workspace

Script Tag (Simplest)

Use data attributes for a zero-JavaScript integration:

<script src="https://rover.rtrvr.ai/embed.js"
  data-site-id="YOUR_SITE_ID"
  data-public-key="pk_site_YOUR_PUBLIC_KEY"
  data-allowed-domains="yourdomain.com,app.yourdomain.com">
</script>

Supported attributes: data-site-id, data-public-key, data-allowed-domains (comma-separated), data-site-key-id, data-worker-url.

Boot Script (Advanced Config)

For task routing, checkpointing, UI options, or other advanced settings, use the two-part snippet before </body>:

<script>
  (function(){
    var r = window.rover = window.rover || function(){
      (r.q = r.q || []).push(arguments);
    };
    r.l = +new Date();
  })();

  rover('boot', {
    siteId: 'YOUR_SITE_ID',
    publicKey: 'pk_site_YOUR_PUBLIC_KEY',
    allowedDomains: ['yourdomain.com'],
  });
</script>
<script src="https://rover.rtrvr.ai/embed.js" async></script>

The inline script queues commands until embed.js loads asynchronously. No commands are lost regardless of load order, and page load is never blocked.

npm Package

npm install @rtrvr-ai/rover

import { boot, shutdown } from '@rtrvr-ai/rover';

boot({
  siteId: 'YOUR_SITE_ID',
  publicKey: 'pk_site_YOUR_PUBLIC_KEY',
  allowedDomains: ['yourdomain.com'],
});

Use npm when you need TypeScript types, version pinning, or SPA lifecycle control.

Framework Guides

React / Next.js

import { useEffect } from 'react';
import { boot, shutdown } from '@rtrvr-ai/rover';

export function RoverWidget() {
  useEffect(() => {
    boot({
      siteId: 'YOUR_SITE_ID',
      publicKey: 'pk_site_YOUR_PUBLIC_KEY',
      allowedDomains: ['yourdomain.com'],
    });
    return () => { shutdown(); };
  }, []);
  return null;
}

Next.js requires an SSR guard since Rover needs window and document:

import dynamic from 'next/dynamic';
const RoverWidget = dynamic(() => import('./RoverWidget'), { ssr: false });

Vue / Nuxt

<script setup>
import { onMounted, onUnmounted } from 'vue';

onMounted(async () => {
  const { boot } = await import('@rtrvr-ai/rover');
  boot({
    siteId: 'YOUR_SITE_ID',
    publicKey: 'pk_site_YOUR_PUBLIC_KEY',
    allowedDomains: ['yourdomain.com'],
  });
});

onUnmounted(async () => {
  const { shutdown } = await import('@rtrvr-ai/rover');
  shutdown();
});
</script>

For Nuxt, create a client-only plugin at plugins/rover.client.ts.

WordPress / Shopify

Use the script tag snippet from above. Place it before </body> in your theme template or theme settings.

Configuration

Domain Security

Navigation

Task Routing

Set taskRouting.plannerOnActError: true (default in auto mode) to fall back to planning when direct execution fails.

Checkpointing

Enabled by default. Rover syncs session state to the cloud for crash recovery and cross-tab continuity. Set checkpointing.enabled: false to disable.

UI & Branding

Content Security Policy (CSP)

No CSP header? No action needed — Rover works out of the box.

If you set CSP headers, add:

For strict CSP, self-host embed.js and worker/rover-worker.js from your own origin, then set workerUrl in your boot config. This eliminates all external domain requirements except connect-src for the API.

Testing Locally

Add localhost to your allowed domains in the Workspace. Verify:

1. Rover widget appears on page load
2. You can type a request and Rover identifies page elements
3. Navigation policies behave as expected
4. Actions execute correctly

Production Checklist

• Site key created with production domains only
• allowedDomains set correctly
• External navigation policy configured
• Tested on production domain
• CSP directives added (if applicable)
• Monitoring blocked host attempts in Workspace

Ongoing Management

From the Rover Workspace you can rotate keys, update domains, enable/disable keys, and monitor usage — all without redeploying code.

See the full API and configuration reference for events, client tools, multi-tab behavior, and more.