Integration Guide

iframe integration

The Storefront can be embedded in any web page using a standard HTML iframe.

Constructing the URL

Build the iframe URL using the URL structure:

https://<prefix>.v3.experiences.holibob.tech/c:<consumerTripCode>/a:<analyticsCode>

Add query parameters as needed:

https://partner.v3.experiences.holibob.tech/c:JZYPWEYD/a:9VJ69DGQ?currency=GBP&language=en&showBackButton=true

HTML implementation

Embed the Storefront using a standard iframe element:

<iframe
    src="https://partner.v3.experiences.holibob.tech/c:JZYPWEYD/a:9VJ69DGQ"
    width="390"
    height="844"
    frameborder="0"
    allowfullscreen
    title="Holibob Experiences"
>
</iframe>

Responsive embedding

For a full-page or responsive layout, use CSS to control the iframe dimensions:

<div style="width: 100%; max-width: 500px; height: 80vh;">
    <iframe
        src="https://partner.v3.experiences.holibob.tech/c:JZYPWEYD/a:9VJ69DGQ"
        width="100%"
        height="100%"
        frameborder="0"
        allowfullscreen
        title="Holibob Experiences"
    >
    </iframe>
</div>

Back button event handling

When showBackButton=true is set, clicking the back button dispatches a stack:frame-action event. Listen for this event to handle navigation in the parent page:

// Listen for back button clicks from the Storefront
document.body.addEventListener("stack:frame-action", (event) => {
    if (event.details.actionType === "BACK") {
        // Navigate user back or close the experience
        window.history.back();
        // or: closeModal();
        // or: navigate('/previous-page');
    }
});

React Native integration

For React Native applications, use the WebView component to embed the Storefront.

1. Install the WebView package

npm install react-native-webview

2. Component implementation

import React from "react";
import { View, StyleSheet } from "react-native";
import { WebView } from "react-native-webview";

const StorefrontView = () => {
    const url = "https://partner.v3.experiences.holibob.tech/c:JZYPWEYD/a:9VJ69DGQ";

    return (
        <View style={styles.container}>
            <WebView
                source={{ uri: url }}
                style={styles.webview}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                startInLoadingState={true}
                scalesPageToFit={true}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: { flex: 1, backgroundColor: "#000" },
    webview: { flex: 1 },
});

export default StorefrontView;

Required WebView properties

Property	Value	Purpose
javaScriptEnabled	true	Required for Storefront functionality
domStorageEnabled	true	Enables local storage for state persistence
scalesPageToFit	true	Auto-scales content to fit the WebView
startInLoadingState	true	Shows a loading indicator while content loads

Direct access

The Storefront can also be accessed directly in a browser without embedding. Navigate to the full URL:

https://partner.v3.experiences.holibob.tech/c:JZYPWEYD/a:9VJ69DGQ?currency=GBP&language=en

This is useful for testing, sharing links with consumers, or linking from emails and notifications.