MedusaJS

Add Zigpoll to Your MedusaJS Storefront

MedusaJS is an open-source headless commerce platform built on Node.js. Since MedusaJS storefronts are fully custom (typically Next.js or Gatsby), adding Zigpoll is as simple as embedding a script tag in your storefront code.

What you'll need

Your Zigpoll Account ID (find it in Zigpoll → Settings → Installation)
Access to your MedusaJS storefront codebase (e.g., your Next.js project)

Step 1: Get your Zigpoll embed code

Log in to your Zigpoll dashboard.
Go to Settings → Installation.
Copy your Account ID.

Step 2: Add the Zigpoll script to your storefront

Since MedusaJS storefronts are custom-built, you'll add the Zigpoll embed script directly in your storefront code. Below are examples for the most common setups.

Next.js storefront (App Router)

Open your root layout file (e.g., app/layout.tsx) and add the Zigpoll script:

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          id="zigpoll-embed"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              ;(function () {
                window.Zigpoll = {
                  accountId: 'YOUR_ACCOUNT_ID'
                };

                var script = document.createElement("script");
                script.type = "text/javascript";
                script.charset = "utf-8";
                script.src = "//cdn.zigpoll.com/static/js/main.js";
                script.async = true;

                document.head.appendChild(script);
              }());
            `,
          }}
        />
      </body>
    </html>
  );
}

Next.js storefront (Pages Router)

Add the script to your pages/_app.tsx:

import Script from 'next/script';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        id="zigpoll-embed"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            ;(function () {
              window.Zigpoll = {
                accountId: 'YOUR_ACCOUNT_ID'
              };

              var script = document.createElement("script");
              script.type = "text/javascript";
              script.charset = "utf-8";
              script.src = "//cdn.zigpoll.com/static/js/main.js";
              script.async = true;

              document.head.appendChild(script);
            }());
          `,
        }}
      />
    </>
  );
}

Plain HTML / Other frameworks

If your storefront uses plain HTML or another framework, paste this in your HTML before the closing </body> tag:

<script type='application/javascript'>
  ;(function () {
    window.Zigpoll = {
      accountId: 'YOUR_ACCOUNT_ID'
    };

    var script = document.createElement("script");
    script.type = "text/javascript";
    script.charset = "utf-8";
    script.src = "//cdn.zigpoll.com/static/js/main.js";
    script.async = true;

    document.head.appendChild(script);
  }());
</script>

Replace YOUR_ACCOUNT_ID with your actual Zigpoll Account ID.

Step 3: Configure display rules

Back in the Zigpoll dashboard, set your survey's Display Rules to control when and where surveys appear:

All pages — sitewide polls, exit intent, timed popups
Specific URLs — target checkout, product, or landing pages
Post-purchase — show surveys on your order confirmation page

(Optional) Post-purchase surveys with order data

To run post-purchase surveys on your MedusaJS order confirmation page, pass order metadata to Zigpoll. Add this script on your order confirmation/thank-you page:

import Script from 'next/script';

// Assumes `order` is available from your page props or API call
export default function OrderConfirmation({ order }) {
  const zigpollScript = `
    ;(function () {
      window.Zigpoll = {
        accountId: 'YOUR_ACCOUNT_ID'
      };

      window.Zigpoll.user = {
        id: '${order.email}',
        metadata: {
          email: '${order.email}',
          name: '${order.shipping_address?.first_name || ""} ${order.shipping_address?.last_name || ""}'.trim(),
          city: '${order.shipping_address?.city || ""}',
          country: '${order.shipping_address?.country_code || ""}'
        }
      };

      window.Zigpoll.metadata = {
        orderId: '${order.id}',
        orderValue: '${order.total}',
        lineItems: ${JSON.stringify((order.items || []).map(i => i.title))}
      };

      var precursorEvent = window.Zigpoll.precursorEvent || {};
      precursorEvent.type = 'medusajs-order-placed';
      precursorEvent.uniqueId = '${order.id}';
      window.Zigpoll.precursorEvent = precursorEvent;

      var script = document.createElement("script");
      script.type = "text/javascript";
      script.charset = "utf-8";
      script.src = "//cdn.zigpoll.com/static/js/main.js";
      document.head.appendChild(script);
    }());
  `;

  return (
    <div>
      <h1>Thank you for your order!</h1>
      {/* ... your order confirmation content ... */}
      <Script
        id="zigpoll-post-purchase"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{ __html: zigpollScript }}
      />
    </div>
  );
}

This attaches the order ID, value, customer email, and line items to the survey response, making it easy to segment and analyze in Zigpoll.

Step 4: Verify the installation

Start your MedusaJS storefront locally or deploy to staging.
Open the site in an incognito/private window.
Confirm your Zigpoll survey appears based on your display rules.

Tips

Use Zigpoll's preview mode to test display settings without publishing.
You can install multiple Zigpoll scripts with different Account IDs for different storefronts or environments.
For URL-based targeting, use Zigpoll's Display Rules — no code changes needed.
MedusaJS exposes order and customer data via its API; use this to enrich window.Zigpoll.metadata for richer survey analytics.

Troubleshooting

Survey not showing? Check your Zigpoll display rules and confirm the script loaded (look for main.js in your browser's Network tab).
Wrong pages? Adjust page targeting in Zigpoll's Display Rules or move the script to a specific page component.
Need help? Contact support@zigpoll.com.

Last updated 4 months ago