Storefront - Integration Guide

Overview

The V3 storefront is a responsive, embeddable consumer-facing user interface that allows consumers to discover and purchase experiences. It provides the latest experience with full interactivity across web browsers and React Native WebView implementations.

The storefront must be configured by passing information on the URL, typically including details about the consumer trip. This configuration influences the product recommendations and guides the user through tailored journeys based on their specific trip context.

URL Structure

V3 URLs are constructed with a base URL, optional path segments, and query parameters:

https://[base-url]/?[query-parameters]

Base URL

The base URL can take one of two formats:

Partner Channel URL

https://<prefix>.v3.experiences.holibob.tech

Where the prefix identifies the Partner Channel (e.g., your-brand)

Vanity URL

https://experiences.your-brand.com

A custom assigned domain

Query Parameters

Query parameters control aspects of the V3 experience.

Example: ?language=en-US&currency=USD&showBackButton=true

There are certain constraints in terms of required params and certain combinations of parameters.

As a minimum, it must be possible to identify the destination of the consumer trip.

This can be achieved by passing either of

• consumerTripId (holibobs id for the trip)

• partnerExternalReference (the partner's reference to the trip

• where - a string with a destination, which can be any of

  • the name of a city, (ideally including country)

  • the name of a country

  • the name of a global region

  • the name and address or name and city of a hotel

  • and airport code

| Parameter

|

Example

|

Description

| | --- | --- | --- | |

consumerTripCode

|

consumerTripCode=abc23456

|

Alternative to /c: segment. Identifies the consumer trip by code.

| |

partnerExternalReference

|

partnerExternalReference=ext123

|

Alternative to /e: segment. Identifies the consumer trip by partner's external reference.

| |

analyticsCode

|

analyticsCode=abcd2345

|

Alternative to /a: segment. Sets the analytics origin code for tracking.

| |

productCode

|

productCode=ABC123

|

Opens a specific product. Behavior depends on productMode.

| |

productMode

|

productMode=storyproductMode=details

|

Controls how the product is displayed when using productCode.

story — Opens story/discovery view (same as /r: segment)

details — Opens product availability view (same as /p: segment)

Defaults to details if not specified.

| |

where

|

where=Paris

|

Sets the destination name context for the experience.

| |

what

|

what=cooking+class

|

Opens product discovery with the specified search term. Creates a search flow showing matching products.

| |

currency

|

currency=USDcurrency=EURcurrency=GBP

|

Sets the interface currency used for the display of all prices and thus the currency accepted at checkout.

Unsupported values are ignored.

| |

language

|

language=enlanguage=en-US

|

Sets the interface language.

If the locale is not supported, falls back to the base language. Unsupported codes are ignored.

| |

showBackButton

|

showBackButton=true

|

Displays a back button on the first frame. When clicked, dispatches a stack:frame-action event with actionType: "BACK".

Show event listener example

| |

s

|

s=eyJ...

|

Encoded state (base64 JSON). Typically set by EMP redirects or deep links. Do not construct manually.

|

iFrame Integration

Your iFrame URL

https://holiverse.v3.experiences.holibob.tech/c:JZYPWEYD/a:9VJ69DGQ?showBackButton=true

This URL reflects your current Consumer Code (JZYPWEYD) and Show Back Button setting (enabled)

HTML Implementation

Embed the V3 widget using a standard HTML iframe element:

<iframe 
    src="https://[base-url]/[path-segments]?[query-parameters]"
    width="390" 
    height="844"
    frameborder="0" 
    allowfullscreen
    title="V3 Experience">
</iframe>

React Native Integration

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

1. Install 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 V3Widget = () => {
  const webViewUrl = "https://[base-url]/[path-segments]?[query-parameters]";

  return (
    <View style={styles.container}>
      <WebView
        source={{ uri: webViewUrl }}
        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 V3Widget;

Required WebView properties:

• javaScriptEnabled: true — Required for widget functionality

• domStorageEnabled: true — Enables local storage

• scalesPageToFit: true — Auto-scales content