Integrate Consumer App to your e-Commerce Website

This page describes how to integrate the Consumer App as widget to your e-commerce web store.

Consumer Apps is a feature of the Haut.AI SaaS Platform, offering a no-code widget for skin analysis and recommendations.

To integrate the Consumer App to your e-commerce web store, select the relevant guide:

• Integrating to Shopify

• Integrating to Woocommerce

• Integrating into other platforms

Every integration provides an option to connect the Consumer App with a cart on your website, allowing easy "add to cart" actions directly from the product recommendation page in the Consumer App.

Integrating to Shopify

There are two options to integrate the Consumer App widget into the Shopify web store.

Option 1: Consumer App widget as a Floating Button

This option makes product recommendations available to your users across all pages of your web store.

Follow this guide for integration: Integrate as Floating Button to Shopify.

Option 2: Consumer App widget as an iFrame section

This option allows the Consumer App to be located on a selected page of your web store, making it possible to lead traffic directly to this page during marketing events.

Follow this guide for integration: Integrate as iFrame Section to Shopify.

Both options can be implemented simultaneously on the same web store to cover different use cases and increase chances of your users to interact with Consumer Apps and get a relevant product recommendation.

To achieve this:

1. Follow the Integrate as Floating Button to Shopify first.

2. Follow the Integrate as iFrame Section to Shopifysecond.

---

Integrating to Woocommerce

Woocommerce integration supports integration as an IFrame section only.

1. Navigate to the Consumer Apps tab on the menu of the SaaS platform.

2. Navigate to your Consumer App details by clicking on the name of your app in the list of apps.

3. Open the Integration tab.

4. Select WooCommerce as your platform.

5. Follow the guide for iFrame integration.

6. Follow the guide for Cart integration.

---

Integrating into other platforms

Other platforms or custom website integrations are supported by the Consumer App only as an iFrame section.

Please note that cart integration with a custom platform requires coding.

If you need help with understanding this integration, please, reach out to your Account Manager.

1. Navigate to the Consumer Apps tab on the SaaS platform menu.

2. Navigate to your Consumer App details by clicking on the name of your app in the list of apps.

3. Open the Integration tab.

4. Select Custom as your platform.

5. Follow the guide for iFrame integration.

6. Follow the guide for Cart integration:

   1. Modify the provided script template to allow customers to add products to the cart

   2. If needed, modify the script that navigates customers to the cart.

---

Not a Haut.AI client yet?

Book a demo Platform overview on haut.ai