Quickstart

Create your accountCopy Anchor Link

Go to dashboard.3guideai.com/signup and enter your work email, company name and a password.

3Guide creates your first site straight away. A site is one app you want to add 3Guide to. It's named after your company, and its domain is set from your email address, which you'll correct in the next step.

Tell 3Guide where your app livesCopy Anchor Link

In the dashboard, open Administration → Settings → General.

1. Set Domain URL to the address of your app, for example app.example.com.
2. Under Related domains, add every other address where the script will run, one per line:
   • staging or preview sites, for example staging.example.com
   • localhost if you want to test on your machine
   • *.example.com to allow every subdomain
3. Save.

Have more than one app? Add each one under Administration → Sites → Create site, then switch between them from the site picker at the top of the dashboard.

Copy your snippet and keysCopy Anchor Link

Open Settings → SDK Installation. Everything you need is on this tab:

Add the snippet to your appCopy Anchor Link

Paste the snippet so it loads on every page, just before </body>. The core of it looks like this:

<script
  src="https://cdn.3guideai.com/sdk/guideai.js"
  data-guideai-bundle="guidance"
  data-site-id="YOUR_SITE_ID"
  data-token="pk_live_YOUR_TOKEN"
></script>

Want analytics too? Add the tracking script next to it. It's covered step by step in Analytics.

Check that it's workingCopy Anchor Link

Deploy (or run locally, if you added localhost in step 2) and reload your app. The chat bubble appears in the bottom-right corner.

No bubble? Open the browser console and check Troubleshooting. It's almost always a domain that isn't listed in step 2, or a missing data-site-id / data-token.

Scan your app to build the knowledge baseCopy Anchor Link

The scan teaches 3Guide your pages and buttons, so guides and answers point at the right places. Run it from your project folder:

npm install --save-dev @guideai/scanner

# 1. Preview what it finds, without uploading anything
npx guideai-scan --dry-run

# 2. Scan and upload with your Admin API Key
npx guideai-scan --key sk_live_YOUR_ADMIN_KEY

The scanner detects your framework (Next.js, React Router, Vue/Nuxt, Angular, Remix, SvelteKit or plain HTML) and prints how many routes and elements it found.

Then open Data & Insights → Knowledge Base in the dashboard. You'll see the new snapshot with its routes and elements. Click Refresh so the assistant uses it immediately rather than a cached copy.

Publish your first guideCopy Anchor Link

1. Open Content → Guides and click AI Generate.
2. Choose Generate a Single Guide.
3. Describe the task, for example "Guide new users through creating their first project". Optionally enter the page it starts on, such as /projects.
4. When it's ready, the guide opens in the builder. Check each step's text and target element.
5. Click Publish.

Reload your app and open the chat bubble: your published guides are listed there for users to start. You can also ask it "how do I create a project?" to get a walkthrough built on the spot, or start a guide from your own code. See How users reach a guide.

Recommended: identify your usersCopy Anchor Link

Tell 3Guide who is signed in, so guides can be targeted and analytics can follow a person across sessions. Call this after sign-in, and on every page load while they're signed in:

window.guideai.initialize({
  visitor: { id: currentUser.id, email: currentUser.email, full_name: currentUser.name },
  account: { id: currentAccount.id, name: currentAccount.name },
})

On sign-out, call window.guideai.clearSession() so the next person on that browser starts fresh.