Website Integration Guide

This guide explains how to integrate SkinChat into your website using ready-to-use web components. No backend development is required. The integration usually takes 10–20 minutes.

Not a Haut.AI client yet?

Talk to sales

What is SkinChat

Skin.Chat is an AI-powered skincare assistant embedded into your website as a web component.

Integration Options

• Skin.Chat Full Page: The chat is embedded directly into a page. Example: https://skin.chat/

• Skin.Chat Floating Button: A floating button that opens SkinChat when clicked. Example: https://haut.ai/product/skinchat

Both options utilize the same chat configuration and Chat ID. The difference is only in the display method on your website.

Where to Find Integration Details

Access all necessary links and parameters in the Skin.Chat SaaS admin panel:

• Path: SaaS Dashboard → SkinChat → Integration

You will find:

• Script URLs

• Your Chat ID

• Up-to-date integration instructions

Before You Start

Ensure you have:

• Chat ID: A unique identifier for your Skin.Chat instance, created in the SaaS admin panel.

• Unique User ID: A stable identifier for the website visitor (e.g., customer ID, email, or internal UUID). This is crucial for preserving chat history and personalizing the user experience.

Option 1: SkinChat Full Page

Embed Skin.Chat directly into a page, such as a consultation page.

Step 1: Include the SkinChat script.

<script
  defer
  type="module"
  src="SKINCHAT_LINK_BY_HAUTAI/skinchat.js">
</script>

Step 2: Add SkinChat to the Page Markup

Add the following HTML tag to include SkinChat on your page:

<hautai-skinchat
  chat="CHAT_ID"
  user="UNIQUE_USER_ID">
</hautai-skinchat>

SkinChat will initialize automatically once the page is loaded.

Option 2: SkinChat Floating Button

Use this option if you want SkinChat to appear as a floating button (typically in the bottom-right corner of the page).

Step 1: Include the Widget Script

<script
  defer
  type="module"
  src="SKINCHAT_LINK_BY_HAUTAI/widget.js">
</script>

Step 2: Add the Widget to the Page

<hautai-skinchat
  chat="CHAT_ID"
  user="UNIQUE_USER_ID">
</hautai-skinchat>

The widget will automatically appear as a floating button and open SkinChat when clicked.

Verifying the Integration

After installation:

• The chat or floating button appears on the page.

• SkinChat opens without errors.

• Users can start a conversation immediately.

If SkinChat is visible and responsive, the integration is complete ✅

Support

If you need help:

• We can assist during integration.

• Verify correct installation.

• Support you before launch (go-live).