Custom embedded block Custom embedded block

Custom embedded block

Outline:

Overview

  • Create a custom-coded embedded block within Skio's customer portal
  • A custom block can leverage Skio's API along with custom code to run queries or mutations
  • Learn more about Skio's API here: Skio Code
  • The custom block will appear at the top of the customer portal and will require a developer to implement

Important considerations

  • This feature will require a developer to implement and custom code is outside of Skio's support 
  • Any query or mutation can implemented that is currently available via Skio's API
    • If a mutation is not yet available, please let us know so we can work on adding it in for you!
  • Skio's customer portal displays all subscriptions for the customer - in Skio this is the storefrontUser - so make sure the custom code can work for all subscriptions

What does an embedded block do?

A custom embedded block is an interactive block that can be added to the Skio customer portal. The custom block can leverage Skio's API to query information in the subscription and even perform specific mutations (actions) on the subscription. For example, if a subscriber has multiple subscriptions you could display a message informing the subscriber they could merge the subscriptions together or create a custom button that allows the subscriber to swap a product in their subscription while also changing their shipping subscription (buy more, ship less, save more!).

How does the embedded block feature work?

Once enabled, the "Custom block" setting will appear in the Portal settings page within Skio. The input block works like any webpage, simply input your HTML and Javascript code in the block. To add custom CSS, use a <style> element in the HTML (see example below).

After inputting your custom code, a preview will generate next to the block to display what will be shown in the customer portal. Make sure to click save and to test this out with a test subscription!

Below is a screenshot of custom code that queries the count of active subscriptions and displays a custom message with the query result. 

Screenshot 2023-10-24 at 3.49.38 PM.png

Here's the code used for the above example:

<html>
<style>
.text-large {
    color: white;
    font-size: 40px;
    font-weight: bold;
}
.text-small {
   color: white;
   font-size: 20px;
}
.background {
   width: 100%;
   height: 200px; 
   padding: 10px;
   background-color: darkviolet;
   margin-bottom: 50px;
}
</style>
<div>
<div class="background">
            <div class="text-large">
                Hello! Welcome to Skio! 
            </div>
            <div class="text-small" id="skio-data"> 
                Fetching subscriptions...
            </div>
        </div>
</div>
<script>
async function fetchSubscriptions() {
const queryString = `
   query getAllSubscriptions {
   Subscriptions {
   id
   }
   }
   `
const response = await fetchSkioAPI(queryString)
            const numSubscriptions = response.data.Subscriptions.length;
            console.log("customBlock Running");
            if (numSubscriptions > 2) {
                document.getElementById("skio-data").innerHTML = `You have 
${numSubscriptions} subscriptions. Try merging your subscriptions!`;
            }
};
        window.onload =function() {
            (async () => {
                await fetchSubscriptions();
            })();
        };
</script>
</html>

 

FAQs

How can I test without pushing it to live subscribers?

We recommend testing this out on your dev site first! If you have a dev site and Skio has not been setup yet, let us know and we can help via help@skio.com.

Can I customize where in the customer portal the block appears?

Currently the block is static and lives at the top of the customer portal. 

Can I customize the size on desktop or mobile?

On desktop, the block width is capped at 657px for desktop and 302px for mobile.

 

 

Was this article helpful?

0 out of 0 found this helpful

Related articles

Articles in this section

Add comment

Please sign in to leave a comment.