Nudges and flags

Plenty of people never open the email. If they come back to your site, Snagr can catch them there.

On-site nudgesCopy Anchor Link

A nudge step shows a small banner or modal the next time the person visits a page with the Snagr script. It can include a title, a short message, a button and an optional discount code. It disappears once they finish or close it, and expires after the number of hours you set.

The SDK draws nudges itself, inside a shadow root so your site's CSS can't break them. To draw your own instead, add data-nudges="off" to the script tag and read them from onState:

<script
  src="https://www.snagr.sh/sdk.js"
  data-key="YOUR_PUBLISHABLE_KEY"
  data-nudges="off"
  defer
></script>

snagr.onState(({ nudges }) => {
  if (nudges[0]) renderMyBanner(nudges[0]);
});

Each nudge has the title, body, cta_text, cta_url, style and optional discount_code you set in the flow.

FlagsCopy Anchor Link

A flag step stores a value on the person. Your site reads it to change its own UI:

if (snagr.flag("offer_10")) showDiscount();

snagr.flag(key, fallback) returns the fallback until the person's state has loaded, so read flags inside onState when the page first renders:

snagr.onState(() => {
  if (snagr.flag("offer_10")) showDiscount();
});

Include "onState" in the install snippet's method list so calls made before the script finishes loading are queued.