> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useinvent.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Wix

> Add your Invent assistant to Wix sites

## Overview

Add your Invent AI assistant to any Wix website with a floating bubble. Perfect for small businesses, portfolios, and e-commerce sites built on Wix.

## Installation

<Steps>
  <Step title="Open Wix Editor">
    Log in to your Wix account and open your site in the Wix Editor.
  </Step>

  <Step title="Add Custom Code">
    Click **Settings** in the left sidebar, then select **Custom Code** under **Advanced**.
  </Step>

  <Step title="Add Code to Body End">
    Click **+ Add Custom Code** and paste this code:

    ```html theme={"system"}
    <invent-assistant assistant-id="YOUR_ASSISTANT_ID" />
    <script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
    ```

    Replace `YOUR_ASSISTANT_ID` with your actual assistant ID.
  </Step>

  <Step title="Configure Settings">
    * Name your code snippet (e.g., "Invent Assistant")
    * Select **Load code once** or **Load code on each new page**
    * Choose **Body - end** as the placement
    * Select **All pages** or specific pages
  </Step>

  <Step title="Apply and Publish">
    Click **Apply**, then **Publish** your site.
  </Step>
</Steps>

## Customization

### Match Your Wix Theme

```html theme={"system"}
<invent-assistant
  assistant-id="YOUR_ASSISTANT_ID"
  theme-appearance="auto"
  theme-button-background-color="#116DFF"
  theme-button-color="#FFFFFF"
/>
<script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
```

### Show on Specific Pages Only

In the Custom Code settings:

1. Instead of **All pages**, select **Choose specific pages**
2. Pick the pages where you want the assistant to appear
3. Click **Apply**

## Wix Stores Integration

For Wix e-commerce sites, you can help customers with:

* Product questions
* Shipping information
* Order tracking
* Size and fit guidance

The assistant will appear on all store pages automatically if you selected "All pages".

## Wix Multilingual Sites

The bubble automatically works with Wix multilingual sites. If your site supports multiple languages, the assistant will:

* Detect the user's language
* Respond in the appropriate language
* Maintain consistency across language versions

## User Authentication

<Warning>
  **Security Requirement:** When using any `user-*` attributes (`user-id`, `user-name`), you **must** also provide `user-hash`. Both `user-id` and `user-hash` must be provided together, or neither should be provided. The `user-hash` must be generated on your backend using HMAC-SHA256 with your assistant's secret key. Never expose the secret key to the client.
</Warning>

For Wix sites with member login, use Wix Velo (formerly Corvid) to generate the hash securely on the backend:

```javascript theme={"system"}
// Backend code (Velo) - backend/getUserHash.jsw
import { currentMember } from 'wix-members-backend';
import { createHmac } from 'crypto';

// Store your secret key in Wix Secrets Manager
export async function getUserHash() {
  const member = await currentMember.getMember();

  if (!member) {
    return null;
  }

  const secretKey = 'your_secret_key'; // Use Wix Secrets Manager in production
  const userId = member._id;

  const hash = createHmac('sha256', secretKey)
    .update(userId)
    .digest('hex');

  return {
    userId: member._id,
    userName: `${member.contactDetails.firstName} ${member.contactDetails.lastName}`,
    userHash: hash
  };
}
```

Then call this from your frontend:

```javascript theme={"system"}
// Frontend code
import { getUserHash } from 'backend/getUserHash';

$w.onReady(async function () {
  const userAuth = await getUserHash();

  if (userAuth) {
    // Set attributes on your invent-assistant element
    const assistant = document.querySelector('invent-assistant');
    assistant.setAttribute('user-id', userAuth.userId);
    assistant.setAttribute('user-name', userAuth.userName);
    assistant.setAttribute('user-hash', userAuth.userHash);
  }
});
```

## Tips for Wix

<CardGroup cols={2}>
  <Card title="ADI & Editor X" icon="wand-magic-sparkles">
    Works with both Wix ADI and Editor X
  </Card>

  <Card title="Mobile Optimized" icon="mobile">
    Automatically adapts to mobile views
  </Card>

  <Card title="Wix Bookings" icon="calendar">
    Help customers book appointments
  </Card>

  <Card title="Wix Restaurants" icon="utensils">
    Answer menu and ordering questions
  </Card>
</CardGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Bubble not showing">
    **Solutions:**

    * Ensure Custom Code is set to "Body - end"
    * Check that "All pages" or correct pages are selected
    * Verify assistant ID is correct
    * Publish your site (preview mode may not show custom code)
  </Accordion>

  <Accordion title="Conflicts with Wix Chat">
    **Solutions:**

    * Disable Wix Chat if using Invent
    * Go to **Settings** → **Chat** → Turn off
    * Both can coexist but may overlap visually
  </Accordion>

  <Accordion title="Not working on mobile">
    **Solutions:**

    * Ensure custom code is set to load on mobile
    * Check mobile view settings in Wix
    * Test in actual mobile device, not just preview
  </Accordion>
</AccordionGroup>

## Wix Premium Required

<Note>
  Custom code functionality requires a Wix Premium plan (not available on free sites).
</Note>