Embedding a survey on a headless storefront

Running a custom or headless storefront — Hydrogen, Next.js, a native app or any web page? Drop an Asky survey in with a single div and script tag.

How the embed works

Asky ships a lightweight embed script. You place an empty container element with your survey code, then load the script. The script finds the container, fetches the survey definition and renders it inline — styled to match your survey settings.

The embed snippet

Add this where you want the survey to appear:

<div id="asky-survey" data-survey-code="YOUR_CODE"></div>
<script async src="https://YOUR_APP_URL/embed.js"></script>

Replace YOUR_CODE with your survey code and YOUR_APP_URL with the app domain shown in your Asky settings. The async attribute keeps it non-blocking, so it never slows your page load.

Getting your survey code

Open the survey in your Asky dashboard. The survey code is shown on the survey detail page — it is the same short code used in standalone links such as /s/<code>. Copy it into the data-survey-code attribute.

Enable the standalone / headless channel

The embed only renders when the survey has the standalone / headless channel enabled. In the survey editor, open the channel settings and turn it on. Without it, the script will load but the survey will not display.

Note: One survey can run across multiple channels at once. Enabling the headless embed does not affect your thank-you page, order-status, POS or email links — they all keep working in parallel.

Where responses go

Submissions from the embed flow into exactly the same place as every other channel. They appear in the survey report with headless as their channel, count toward your KPIs and funnel, feed NPS/CSAT scoring, and are included in CSV exports. Filter the report by channel to isolate headless feedback when you need it.

Tips for custom storefronts

  • Render the container only on the page where the survey should appear — for example a post-purchase confirmation route.
  • In single-page apps, make sure the container is mounted before the script runs, or load the script after navigation completes.
  • Use a unique survey code per survey; you can place several embeds on different pages.