Embedding Spaaza in a webshop or app

Spaaza has a web application, called Spaaza Embed (also sometimes referred to as Spaaza’s “iFrame”), which provides a personalised program user experience that works out of the box. This application is designed to be embedded in a website or mobile application as an iFrame.

Spaaza Embed can be used to show a person points, vouchers, rewards, promotions that are available for them in Spaaza. Spaaza Embed also provides interactive elements - for example, the ability to “claim” vouchers, convert points into a voucher or share a referral on a social network. Spaaza Embed is responsive and is designed to work on any device.

The content shown in Spaaza Embed is based on campaigns and configurations that can be managed using Spaaza Console.

Implementation

General implementation

To use Spaaza Embed with an iFrame a session token needs to be requested from Spaaza, this will then need to be passed to the page as a parameter, together with the user id. The process works as follows:

• The website or application calls Spaaza’s Session endpoint, passing the X-Spaaza-MyPrice-App-Hostname header along with one of the following user identifiers: username, user_id, member_number or authentication_point_identifier. This endpoint will return the user and session information.
• The website or application requests the Spaaza page in an iFrame with the session_key and user_id as follows: https://[CHAIN_ID].embed.spaaza.com/user?session_key=[SESSION_KEY]&user_id=[USER_ID]
• Spaaza will validate that the session information is correct and load personalised content.

Shopify

Spaaza Embed is automatically installed in the default template when Spaaza’s Shopify app is installed. Developers or webshop managers can then customise how, when and where they want this to be displayed by adjusting template files.

You can read more about working with Spaaza Embed in a Shopify store with Spaaza’s Shopify app installed here.

Magento (Adobe Commerce Cloud)

Spaaza Embed is included when Spaaza’s Magento 2 extension is installed. Developers can then choose how and where to show this using standard Magento components. You can read more about using this web application in Magento here.

iOS and Android applications SDK (coming soon)

Spaaza is working on an SDK to make it easy to use Spaaza Embed in an existing iOS or Android application. If you are interested in being an early user of this SDK please contact Spaaza Support.

Adjusting the height of the iFrame dynamically

Spaaza Embed will post its height (whenever it changes) so that the website or application that has can adjust the iFrame height accordingly. This can be used to avoid scrollbars or empty space from being shown on the web page.

The code snippet below shows how a web page could use this to adjust the iFrame height.

 <iframe 
    id="spaaza-embed-iframe" 
    allow="clipboard-write"
    src="https://[chain_id].embed.spaaza.com/user?session_key=[SESSION_KEY]&user_id=[USER_ID]"
    style="width:100%;border:none;">
 </iframe>

 <script>
    window.onmessage = (e) => {
        if (e.data.hasOwnProperty("frameHeight")) {
            document.getElementById("spaaza-embed-iframe").style.height = `${e.data.frameHeight}px`;
        }
    }
 </script>

Custom styling

In general, brands can control some aspects of the styling of Spaaza Embed through campaign-level configurations on Spaaza Console. It is also possible for Spaaza to apply a custom style sheet and configuration, in which case many more styling options become available. This is custom work that needs to be done by Spaaza’s team. For more information please contact Spaaza Support.