Embed a Nash widget on your site

Last updated: August 16, 2026

Nash widgets are components you drop into your own website — an embedded map, an arrival time, a delivery list — that show your customers live delivery information served by Nash. The Widgets settings page is where you set up the four things a widget needs before it will serve on your site: it has to be turned on, the pages that embed it have to be allowed, your backend has to hold a credential, and your page has to carry the loader snippet.

Find it under Settings ▸ Connections ▸ Widgets. The page subtitle reads Embeddable Nash components for your own site.

Note

You'll need organization-management permissions to open and edit Widgets. If you don't see it in your settings, ask an admin in your organization.

This article sequences the whole job and links out to each step. The first time you open the page, Nash shows the same sequence as a guided setup with numbered step cards.

What a widget needs to serve

A widget only serves on your site once all of these are true:

  1. The widget is turned on in the catalog.
  2. Your site's origin is allowed — the exact web origin of the page that embeds it.
  3. Your backend holds a credential — a long-lived secret it exchanges for short-lived embed sessions.
  4. Your page carries the loader snippet — the script tag and element that render the widget.

The catalog and origins are saved together with a Save changes bar; credentials commit on their own the moment you issue them. Work through the four steps in order.

1. Turn on the widget

In the Widget catalog, switch on the widget you plan to embed, then use the Save changes bar to save. See turn widgets on and off for the full catalog and what each widget embeds.

Important

Live Map is the only widget with a copy-paste embed snippet today. You can turn on ETA Chip, Delivery List, and Delivery Details, but they don't produce a snippet yet — there's nothing to drop into your page for them. Nash Agent is different again: its embeds are set up per agent, not here — see what Nash Agent is. For a working end-to-end embed today, use Live Map.

2. Allow your site's origin

In Allowed origins, add the exact origin of every page that will embed a widget — your production site and any staging site. An embed session is only minted for pages on an allowed origin; anywhere else is refused. See allow the sites that can embed your widgets. Origins save with the same Save changes bar as the catalog.

3. Issue a backend credential

In Embed credentials, select Issue credential, name it, and copy the one-time secret into your backend or secret manager. The secret is shown once and belongs on your server, never in the browser. See issue and manage embed credentials.

Credentials commit immediately — they are not held behind the Save changes bar.

4. Copy the snippet into your page

With Live Map turned on, select Embed snippet on its catalog row to copy the loader to your clipboard, and paste it into your page. The snippet is a script tag plus a <nash-live-map> element. The element points at a token-endpoint on your own backend:

Note

Your backend serves the token endpoint by exchanging the credential from step 3 for a short-lived session. That backend route is a developer task — the browser only ever sees the short-lived session, never the long-lived secret.

Once the snippet is on an allowed page and your backend is serving sessions from the credential, the widget renders live for your customers.

Where to go next

Related

  • What Nash Agent is — Nash Agent embeds are set up per agent, not on this page.
  • Embed credentials are not the same as your API keys or webhooks. Those live under Settings > Connections, alongside Widgets, and are separate from the widget embed secret here.