How do I render the Skio Login/Customer Portal in an iFrame?

If you want to display Skio's Login or Customer Portal pages on custom pages within your Shopify store, you can embed them using an iFrame.

By default, Skio pages are accessible at these URLs:

• Login page: yourdomain.myshopify.com/a/account/login

• Customer Portal: yourdomain.myshopify.com/a/account/subscriptions

These URLs are generated automatically for all Skio merchants and cannot be changed in the Skio Dashboard.

How to embed Skio pages in an iFrame

To embed the Skio Login or Customer Portal in an iFrame,

1. Use the following URL structure in your <iframe> element:

   https://cpv3.skio.com/a/account/login?hostname=yourdomain.myshopify.com

   1. If you’re using Customer Portal v2, replace cpv3.skio.com with storefront-iframe.skio.com in the above URL.

2. Replace yourdomain with your store's Shopify domain (found in your Shopify admin).

Custom CSS on your Shopify page won't affect the styling inside the iFrame. To customize the look of the login or portal pages, navigate to Storefront > Customer Portal in the Skio Dashboard and add your CSS using Custom Blocks.

Auto-login users within an iFrame

You can also auto-login (magic login) customers to Skio's Customer Portal within an iFrame. This is especially useful for headless storefronts. Use the following code snippets to generate the magic login URL:

Liquid

{% liquid
  assign store_id_hash = 'STORE_ID_HASH'
  assign skio_hash = customer.id | append: store_id_hash | md5
%}

        {%- capture skioIframeSrc -%}
        https://cpv3.skio.com/a/account/shopify-login?hostname={{ shop.domain }}&shop={{ shop.permanent_domain }}&email={{ customer.email | url_encode }}&hash={{ skio_hash }}&id={{ customer.id | url_encode }}&totalSpent={{customer.total_spent | url_encode}}
        {%- endcapture -%}

The STORE_ID_HASH can be obtained at dashboard.skio.com/theme.

Javascript

import md5 from 'crypto-js/md5';
        /**
        * Generate a Skio auto-login URL to be used in iframe.
        * @example <iframe src={generateIframeSrc(this.customer)}></iframe>
        * @returns {String} URL string
        */
        function generateIframeSrc(customer) {
        const STORE_ID_HASH = "STORE_ID_HASH_FROM_SKIO_DASHBOARD"
        const STORE_HOSTNAME = "YOUR_STORE_HOSTNAME" // your store's public domain
        const STORE_SHOPIFY_DOMAIN = "YOUR_STORE_DOMAIN" // your store's myshopify domain
        const url = new URL("https://cpv3.skio.com/a/account/shopify-login");
        url.searchParams.set("hostname", STORE_HOSTNAME);
        url.searchParams.set("shop", STORE_SHOPIFY_DOMAIN);
        url.searchParams.set('email', customer.email);
        url.searchParams.set('id', customer.id);
        url.searchParams.set('hash', md5(`${customer.id}${STORE_ID_HASH}`));
        url.searchParams.set("totalSpent", customer.total_spent);
        return url.toString();
        }