> For the complete documentation index, see [llms.txt](https://docs.saas.haut.ai/haut.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.saas.haut.ai/haut.ai/quick-start-guides/no-code-app-for-e-commerce-businesses/integrate-consumer-app-to-your-e-commerce-website.md).

# 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](/haut.ai/haut.ai-features/consumer-apps.md) 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-shopify "mention")
* [#integrating-to-woocommerce](#integrating-to-woocommerce "mention")
* [#integrating-into-other-platforms](#integrating-into-other-platforms "mention")

{% hint style="success" %}
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.
{% endhint %}

## 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](/haut.ai/quick-start-guides/no-code-app-for-e-commerce-businesses/integrate-consumer-app-to-your-e-commerce-website/integrate-as-floating-button-to-shopify.md).

### 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](/haut.ai/quick-start-guides/no-code-app-for-e-commerce-businesses/integrate-consumer-app-to-your-e-commerce-website/integrate-as-iframe-section-to-shopify.md).

{% hint style="info" %}
**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](/haut.ai/quick-start-guides/no-code-app-for-e-commerce-businesses/integrate-consumer-app-to-your-e-commerce-website/integrate-as-floating-button-to-shopify.md) first.
2. Follow the [Integrate as iFrame Section to Shopify](/haut.ai/quick-start-guides/no-code-app-for-e-commerce-businesses/integrate-consumer-app-to-your-e-commerce-website/integrate-as-iframe-section-to-shopify.md)second.
   {% endhint %}

***

## Integrating to Woocommerce

Woocommerce integration supports integration as an IFrame section only.

1. Navigate to the [`Consumer Apps`](https://saas.haut.ai/app/skin-consultant/dashboard) 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.

{% hint style="info" %}
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.
{% endhint %}

1. Navigate to the [`Consumer Apps`](https://saas.haut.ai/app/skin-consultant/dashboard) 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.

***

{% hint style="warning" %}
Not a Haut.AI client yet?
{% endhint %}

<a href="https://haut.ai/book-a-demo?utm_source=referral&#x26;utm_medium=saas_docs&#x26;utm_campaign=Docs_SaaS_HautAI" class="button primary" data-icon="user-vneck">Book a demo</a> <a href="https://haut.ai/product/ai-skin-analysis?utm_source=referral&#x26;utm_medium=saas_docs&#x26;utm_campaign=Docs_SaaS_HautAI" class="button secondary" data-icon="external-link">Platform overview on haut.ai</a>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.saas.haut.ai/haut.ai/quick-start-guides/no-code-app-for-e-commerce-businesses/integrate-consumer-app-to-your-e-commerce-website.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.