Rendering the Skio Login / Customer Portal in an iFrame

If your store would like to use the Skio Login / Customer Portal pages outside of the standard Skio URLs, it is now possible to embed those pages inside of an iFrame, allowing them to be used on any page within your Shopify store!

Typically, the Skio Login page exists at "yourdomain.myshopify.com/a/account/login", and the Skio Customer Portal typically exists at "yourdomain.myshopify.com/a/account/subscriptions" (where "yourdomain" is your store's Shopify domain, found in your Shopify admin portal). These URLs are not something that can be changed in the Skio backend, as Skio functionality specifically utilizes these URLs on all merchant stores that have Skio installed and set up.

In order to place the Skio Login / Customer Portal within an iFrame element, the following URL structure should be passed to the <iframe> :

https://storefront-iframe.skio.com/a/account/login?hostname=yourdomain.myshopify.com

That's it! Please note that if you are using an iFrame to render the Skio Login / Customer Portal, any CSS placed into the DOM will not apply to the elements in the iFrame itself; for this reason, we recommend using Skio's Custom Blocks to add your desired CSS to the Skio Login / Customer Portal.

Auto-login user within an Iframe

You can also auto-login the customer to Skio's customer portal within an iframe. This can be useful if your storefront is headless. Here are code snippets that will help you to generate the URL:

Liquid:

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

{%- capture skioIframeSrc -%}
  https://storefront-iframe.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 -%}

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 = "YOUR_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://storefront-iframe.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();
}

Note:

The Store ID Hash can be obtained from the Skio Dashboard -> Resources -> Theme Setup page.