Install the widget

Add the Evermach widget to your app with a script tag, an ES module, or web components, and choose who can use it.

Before you start

Open your project's Install widget page in Evermach. It shows your embed key and a ready-to-paste snippet.
An Admin adds every site where the widget will run to the allowed origins list. The list applies to your whole organization, and the widget refuses to start on any other site.

Add the script tag

Paste this before the closing </body> tag of your app:

HTML

<script
  src="https://evermach.com/widget.js"
  data-embed-key="emb_your_key"
  data-position="bottom-right"
  data-mode="system"
  defer
></script>

Attribute	What it does	Default
`data-embed-key`	Your project's embed key (required).	—
`data-position`	`bottom-right`, `bottom-left`, `top-right`, or `top-left`.	`bottom-right`
`data-launcher-label`	Text on the launcher button.	Request a change
`data-primary-color`	Accent color, as a hex value.	`#cb2176`
`data-mode`	`light`, `dark`, or `system`.	`system`
`data-show-launcher`	Set to `false` to hide the floating launcher.	`true`

Open it from your own button

Any element with data-evermach-open, data-evermach-close, or data-evermach-toggle controls the widget. Set the attribute to your embed key, or leave it empty to target the first widget on the page.

HTML

<!-- Hide the floating launcher and open the widget from your own UI -->
<script src="https://evermach.com/widget.js" data-embed-key="emb_your_key"
  data-show-launcher="false" defer></script>

<button data-evermach-open="emb_your_key">Request a change</button>

For more control, load the ES module and use its API. Each widget has open(), close(), toggle(), isOpen(), and destroy().

HTML

<script type="module">
  import { getOrCreateWidget } from "https://evermach.com/widget.esm.js";

  const widget = getOrCreateWidget({ embedKey: "emb_your_key", showLauncher: false });
  document.querySelector("#feedback")?.addEventListener("click", () => widget.open());

  // Fires whenever the widget opens or closes.
  window.addEventListener("evermach:change", (event) => console.log(event.detail.open));
</script>

Use web components

HTML

<script type="module" src="https://evermach.com/widget.elements.js"></script>

<!-- A launcher button you can place anywhere -->
<evermach-button embed-key="emb_your_key" label="Request a change" mode="system"></evermach-button>

<!-- Or the chat alone, opened from code with .open(), .close(), and .toggle() -->
<evermach-chat embed-key="emb_your_key"></evermach-chat>

Both elements accept embed-key, position, color, mode, and origin. <evermach-button> also takes label and gradient-colors (a comma-separated list), and <evermach-chat> takes open.

Choose who can use the widget

Mode	Who can start a chat
Anonymous (default)	Anyone visiting your app.
Email OTP	Only people on your approved list (up to 500 emails) and Admins of your organization. They sign in with a 6-digit code sent by email, valid for 10 minutes.

With Email OTP, you also choose how long a signed-in session lasts (2 hours by default). Only Admins can change the mode or the approved list.

Settings you manage in Evermach

A keyboard shortcut that opens the widget.
Default visibility: shown as usual, open on load, or hidden.
The icon shown in the widget, taken from your organization's icon.

The widget stores an anonymous visitor ID and its launcher preferences in the browser's local storage. Your own privacy notice should cover the widget.

Questions about anything here? Email [email protected] or book a demo.