# JavaScript API

The window.ProductTour object the widget adds to your page.

The script tag adds `window.ProductTour` as soon as it loads. If your code may run first, wait for it:

```js
function onProductTour(callback) {
  if (window.ProductTour) return callback(window.ProductTour);
  const timer = setInterval(() => {
    if (window.ProductTour) {
      clearInterval(timer);
      callback(window.ProductTour);
    }
  }, 100);
}
```

## complete

`ProductTour.complete(eventName)` completes every checklist item of type **Custom Event** with that event name.

```js
ProductTour.complete('file_uploaded');
```

## embedChecklist

`ProductTour.embedChecklist(selector, checklistId)` renders a checklist inside an element on your page instead of the floating button. Find the checklist ID in Dashboard → Checklists. The embedded checklist uses Shadow DOM, so your CSS doesn't change it.

```js
ProductTour.embedChecklist('#onboarding-sidebar', 'a1b2c3d4-…');
```

## identify

`ProductTour.identify(userId)` saves checklist progress against your own user ID, so it loads on any device where you identify the same user. Progress the user made anonymously in this browser carries over. IDs can be up to 255 characters. You can also set it on the script tag with `data-user-id`.

```js
ProductTour.identify(currentUser.id);
```

## reset

`ProductTour.reset()` forgets the identified user. Call it on sign-out, so the next person on the same browser starts fresh.

## getUserId

`ProductTour.getUserId()` returns the ID progress is currently saved under: yours after `identify`, an anonymous one before.

## projectId

`ProductTour.projectId` is the project the widget is configured for. Useful for debugging.