Get early access
Menu
Docs

Install Wayhint in Angular

The Angular router uses the History API, which Pepper watches, so guided goals carry on across routes.

You need a site key, and your domain on its allowlist. See before you start. Replace YOUR-GUIDE-HOST and YOUR_SITE_KEY in the snippets.

  1. Add the script tag to src/index.html

    Paste it before </body>. Do not add it to angular.json scripts: the bundled copy would lose the folder its 3D chunk loads from. If you must load it another way, set window.WayhintConfig = { siteKey, assetsUrl } first.

    src/index.html
      <app-root></app-root>
  <script src="https://YOUR-GUIDE-HOST/widget/guide.js" data-site-key="YOUR_SITE_KEY" async></script>
</body>

  2. Optional: call it from a component

    Start a guide from your own help button with window.Wayhint?.ask(...).

    help.component.ts
    import { Component } from '@angular/core';

declare global {
  interface Window { Wayhint?: { ask(goal: string): void } }
}

@Component({
  selector: 'app-help',
  template: '<button (click)="guide()">Show me how</button>',
})
export class HelpComponent {
  guide() {
    window.Wayhint?.ask('invite a teammate');
  }
}

Check it works

Open the page. An Ask Pepper button appears in the bottom corner and Pepper waves. In the browser console, window.Wayhint should be defined. If nothing appears, check the console for [web-assistant] messages: an unknown site key or a domain missing from the allowlist are the usual causes.

Next