Skip to main content

App Integration

Use this guide if you want to integrate Faslet in a native app while keeping the Faslet experience inside a webview. In this setup, your app decides when to show the CTA, and Faslet handles the sizing flow and returns updated user data.

🚧Preview
Note that this feature is currently in preview. While we don't expect anything to change, please contact us before using it. We will work together to ensure a smooth transition to the final version.

How it works​

At a high level, the app integration loop is:

  1. Ask the Assistant State API what to show for a product.
  2. Show either no button, a default CTA, or a result CTA based on the returned state.
  3. Open a webview with Faslet and pass the returned userId via the <faslet-app user-id="..."> attribute.
  4. Capture updated user data via window._faslet.onDataChanged inside the webview.
  5. Persist that data in your app/backend and send it again in the next assistant/state call.

State-driven UI​

The Assistant State API returns one of these states:

StateApp behavior
hiddenDo not show the Faslet CTA for this product.
defaultShow your default "Find your size" CTA.
resultShow a CTA with the recommended size (from data.result).

Always keep and reuse the returned data.userId. This links future requests to the same Faslet profile.

Implementation steps​

1) Request assistant state​

Call POST /assistant/state when a product screen is opened (or when product variants change).

Minimal request:

Use placeholders in this guide as template values that should be replaced with your own IDs and metadata.

{
  "productId": "PRODUCT_ID",
  "variants": [
    { "sizeLabel": "S", "available": true, "variantId": "VARIANT_ID_S" },
    { "sizeLabel": "M", "available": true, "variantId": "VARIANT_ID_M" }
  ]
}

2) Render your native CTA from state​

Use the returned state to decide if and how to render your button.

switch (assistantState.state) {
  case 'hidden':
    hideFasletButton();
    break;
  case 'default':
    showFasletButton('Find your size');
    break;
  case 'result':
    showFasletButton(`Recommended: ${assistantState.data.result}`);
    break;
}

3) Open Faslet in a webview​

When the user taps your CTA, open a webview that includes your regular Faslet web integration and pass the userId from assistant/state:

<faslet-app
  shop-id="SHOP_ID"
  platform="unknown"
  product-name="PRODUCT_TITLE"
  product-identifier="PRODUCT_IDENTIFIER"
  brand="PRODUCT_BRAND"
  product-img="PRODUCT_IMAGE_URL"
  user-id="USER_ID_FROM_ASSISTANT_STATE"
  fullscreen="true"
></faslet-app>
<script src="https://widget.faslet.net/faslet-app.min.js" defer></script>

After the widget has loaded, open it programmatically:

window._faslet?.openWidget?.();

4) Capture user updates from the webview​

Use onDataChanged to receive updated profile context. Forward this payload to the native layer and persist it.

interface Window {
  _faslet?: {
    onDataChanged?: (userData: {
      userId: string;
      widgetVersion?: string;
      seenExperiments?: string;
      experimentVariants?: string;
      profile?: FasletUserProfile;
    }) => unknown;
  };
}

window._faslet = {
  ...window._faslet,
  onDataChanged: (userData) => {
    postMessageToNativeApp({ type: 'faslet-user-data', payload: userData });
  },
};

5) Reuse user data in future assistant-state calls​

On next product views, send the stored user fields back to POST /assistant/state, for example:

{
  "productId": "PRODUCT_ID",
  "variants": [
    { "sizeLabel": "S", "available": true, "variantId": "VARIANT_ID_S" },
    { "sizeLabel": "M", "available": true, "variantId": "VARIANT_ID_M" }
  ],
  "userId": "USER_ID",
  "widgetVersion": "WIDGET_VERSION",
  "seenExperiments": "SEEN_EXPERIMENTS",
  "experimentVariants": "EXPERIMENT_VARIANTS",
  "profile": {
    "gender": "PROFILE_GENDER",
    "height": "PROFILE_HEIGHT_CM",
    "weight": "PROFILE_WEIGHT_KG",
    "age": "PROFILE_AGE"
  }
}

Common pitfalls​

  • Not passing user-id into <faslet-app> in the webview.
  • Not persisting the latest onDataChanged payload.
  • Replacing userId between sessions instead of reusing it.
  • Sending incomplete or stale variant availability in assistant/state requests.

Help​

In case of any questions, please don’t hesitate to contact us on support@faslet.me