Embed Storefront on your website

Phasio provides manufacturers with powerful integration capabilities, allowing you to seamlessly embed your custom Storefront directly onto your company website or authorized affiliate sites. This integration enables customers to request quotes and place orders without leaving your website, offering a complete checkout process with integrated payment support—and delivering a cohesive, convenient customer experience.

Embed your Storefront or Customer Dashboard

1. Navigate to Organization from the main sidebar, and select General.

2. Scroll down to the Features section.

3. Click on the Embed button in the Features section.

4. Embed type: Choose whether to embed the Storefront or the Customer Dashboard. A custom integration link will be generated based on your selection.

5. Embed code: Copy the iframe embed code displayed on the screen.

   You can paste this HTML code into your website’s content management system (CMS) to embed the selected Phasio component directly within your existing web pages.

6. Whitelist Domain: Enter your website domain in the provided field to whitelist it for embedding. This security measure ensures that your Phasio interface can only be embedded on websites that you authorize.

Storefront analytics events

When the Phasio Storefront is embedded on your website, it can send conversion events to the parent page. You can then forward those events to your own analytics platform.

Available events

• begin_checkout fires when a customer completes a Checkout action. Returning to an existing checkout page does not fire it again. There is no session-level deduplication, so a visitor who checks out twice produces two events.
• generate_lead fires when a customer saves or requests a quote.
• purchase fires when a customer completes the purchase flow.

Payload

Each event contains the event name, order currency, and order value:

{
  "event": "purchase",
  "currency": "EUR",
  "value": 249.50
}

value is the gross payable order total in the stated currency. It includes discounts, top-ups, additional line items, shipping, and applicable tax or VAT.

The payload does not contain an order or transaction ID. This means purchase events cannot be reliably deduplicated and do not constitute a complete ecommerce event for platforms such as GA4. Treat these events as conversion signals for attribution, not as a revenue source of truth. Your Phasio order list remains the authoritative record.

Consent

If the visitor rejects analytics consent, Phasio suppresses the message at source and your website does not receive the event. Any consent gating you apply on your own side is additional to this, not a replacement for it.

Setup

1. Add your website under Storefront Settings → Embed → Permitted domains. The domain must match exactly, including the subdomain.
2. Give your Storefront iframe an ID and listen for messages from it.
3. Place the script after the iframe element so the element exists when the script runs.

<iframe
  id="phasio-storefront"
  src="https://example.phas.io/storefront/your-storefront-id"
></iframe>

<script>
  (function () {
    var storefront = document.getElementById('phasio-storefront');
    if (!storefront) return;

    var storefrontOrigin = new URL(storefront.src, window.location.href).origin;
    var allowed = ['begin_checkout', 'generate_lead', 'purchase'];

    window.addEventListener('message', function (message) {
      if (message.source !== storefront.contentWindow) return;
      if (message.origin !== storefrontOrigin) return;

      var data = message.data;
      if (typeof data === 'string') {
        try { data = JSON.parse(data); } catch (e) { return; }
      }
      if (!data || allowed.indexOf(data.event) === -1) return;
      if (typeof data.currency !== 'string') return;
      if (typeof data.value !== 'number' || !Number.isFinite(data.value)) return;

      // Handle the event however your analytics setup requires.
      console.log('Phasio event', data.event, data.currency, data.value);
    });
  })();
</script>

The listener validates the iframe source, Storefront origin, event name, currency, and value before handing you the event. You can then push it to a data layer, call an analytics SDK directly, map it to a platform-specific ecommerce schema, or apply your own deduplication. Phasio does not prescribe a platform or tag configuration.

Troubleshooting

If no events arrive, check these three items in order:

1. Your domain is listed under Permitted domains, matching exactly including the subdomain.
2. Analytics consent was accepted in the test session. Rejection suppresses the event at source.
3. The script sits after the iframe element in the page, not in <head> or in a tag manager container that fires on page view.

To confirm events are arriving before you wire up forwarding, log message.data inside the listener and run a test order.

Allow an affiliate to embed your Storefront

1. Navigate to Organization from the main sidebar, and select General.
2. Scroll down to the Features section.
3. Click on the Embed button in the Features section.
4. Select the "On My Affiliate's Website" tab.
5. Affiliate Name: Enter your affiliate’s name in the designated field. A unique, affiliate-specific link will be generated. Any orders placed through this link will be automatically tagged as originating from the affiliate for accurate tracking.
6. Embed code: Embed the affiliate storefront on your affiliate’s website using the auto-generated embed code, which is tailored specifically for that affiliate relationship.
7. Whitelist Domain: Enter your affiliate’s website domain to whitelist it for embedding. This security measure ensures that your Phasio interface can only be embedded on websites that you authorize.

This flexible embedding system enables manufacturers to expand their digital presence across both owned and partner websites, while accurately tracking the source of all incoming orders for proper attribution.