# Wix Installation

## Prerequisites

* **Wix Premium Plan**: Custom code features require a paid Wix subscription
* **MessageMatch Account**: Sign up at [MessageMatch](https://messagematch.com/) if you haven't already
* **A MatchAgent**: Create one in your MessageMatch dashboard

## Step 1: Get Your MatchAgent Script

1. Log in to your [MessageMatch dashboard](https://messagematch.ai/dashboard)
2. Navigate to the **MatchAgents** section
3. Click **Create MatchAgent** or select an existing one
4. Click the **Copy Script** button to copy your MatchAgent code

Your script will look something like this:

```html
<script>
  window._evolveConfig = {
    widgetId: "your-widget-id",
    apiKey: "your-api-key"
  };
</script>
<script src="https://cdn.messagematch.ai/widget.main.js"></script>
```

Use the exact URL from your MessageMatch dashboard if it differs (for example a staging Worker). Production is **`https://cdn.messagematch.ai`**.

## Step 2: Add Custom Code in Wix

### Navigate to Custom Code Settings

1. Log in to your **Wix account** and open your site's dashboard
2. Click **Settings** in the left-hand menu
3. Scroll down to find the **Advanced** section
4. Click **Custom Code**

!\[Wix Settings > Advanced > Custom Code]

### Add Your MatchAgent Code

1. Click the **+ Add Custom Code** button (top right corner)
2. Paste your complete MessageMatch script into the text box
3. Give it a recognizable name (e.g., "Domain Name")

### Configure Code Placement

Under **Add Code to Pages**, choose one:

* **All pages**: MatchAgent will appear on every page (recommended for most users)
* **Choose specific pages**: Select only the landing pages you want to personalize

Under **Place Code in**, select:

* **Body - end**: This is the recommended placement for MessageMatch

> **Tip**: Placing the code at the end of the body ensures your page loads quickly while still enabling message matching.

### Apply Changes

Click **Apply** to save your custom code settings.

## Step 3: Add Content Classes to Wix Elements

Now you need to tell MessageMatch which text elements to personalize by adding CSS classes.

### Access Wix Editor

1. From your Wix dashboard, click **Edit Site**
2. Select the element you want to personalize (heading, paragraph, button text, etc.)

### Add Custom CSS Classes

1. Click on the text element you want to personalize
2. Click the **Settings** icon (⚙️) or right-click and select **Properties**
3. Look for **CSS Classes** or **Custom Classes** field
4. Add the appropriate class:
   * `content1` - For your primary headline
   * `content2` - For your secondary headline/subheading
   * `content3` - For body text or supporting copy
   * `content4` - For call-to-action text
   * `content5` - For additional personalized content

> **Note**: In some Wix themes, you may need to use the Wix Velo (code) editor to add custom classes. See the [Advanced Wix Setup](#advanced-wix-setup-using-velo) section below.

### Alternative: Using Wix Velo for Classes

If you can't find the CSS class option in the standard editor:

1. Click **Dev Mode** in the top menu bar
2. Select **Turn on Dev Mode**
3. Click on the element you want to personalize
4. In the Properties panel, find the **ID** field
5. Note down the element ID (e.g., `text1`)
6. In the Velo code panel, add:

```javascript
$w.onReady(function () {
  $w("#text1").customClassList.add("content1");
  $w("#text2").customClassList.add("content2");
  // Add more as needed
});
```

## Step 4: Publish and Test

1. Click **Publish** in the Wix Editor
2. Visit your live site
3. Open browser Developer Tools (F12)
4. Check the Console for MessageMatch initialization messages
5. Verify that your personalized content is appearing

## Troubleshooting

### MatchAgent Not Loading

* **Check Premium Status**: Custom code requires a Wix Premium plan
* **Verify Code Placement**: Ensure code is set to load on "Body - end"
* **Clear Cache**: Try viewing your site in an incognito window
* **Check Console**: Look for any JavaScript errors in browser DevTools

### Content Not Changing

* **Verify Classes**: Make sure elements have the correct `content1`, `content2`, etc. classes
* **Check MatchAgent**: Ensure your MatchAgent has variants configured for each content slot
* **Refresh Page**: MessageMatch caches content—try a hard refresh (Ctrl+Shift+R)

### Classes Not Applying in Wix

Some Wix templates don't expose CSS class options easily. Try these alternatives:

1. **Use Velo**: Enable Dev Mode and add classes programmatically
2. **Use HTML Embed**: Embed custom HTML blocks with your own markup
3. **Contact Support**: Reach out to MessageMatch support for theme-specific help

## Advanced Wix Setup Using Velo

For full control over your Wix site, you can use Wix Velo (formerly Corvid):

```javascript
// In your page code
import { onReady } from 'wix-window';

$w.onReady(function () {
  // Add MessageMatch classes to elements
  $w("#headline1").customClassList.add("content1");
  $w("#subheading1").customClassList.add("content2");
  $w("#bodyText1").customClassList.add("content3");
  $w("#ctaButton").customClassList.add("content4");
});
```

This approach gives you precise control over which elements receive personalization.

## Quick Reference

<table><thead><tr><th width="89.8984375">Step</th><th width="468.11328125">Action</th></tr></thead><tbody><tr><td>1</td><td>Copy script from MessageMatch dashboard</td></tr><tr><td>2</td><td>Wix Dashboard → Settings → Advanced → Custom Code</td></tr><tr><td>3</td><td>Add script, name it, set to "Body - end"</td></tr><tr><td>4</td><td>Add <code>content1</code>-<code>content5</code> classes to text elements</td></tr><tr><td>5</td><td>Publish and test</td></tr></tbody></table>

## Need Help?

* Check our [FAQ](/messagematch-docs/faq/faq.md) for common questions
* Review [Basic Configuration](/messagematch-docs/getting-started/installation/basic-configuration.md) for MatchAgent setup
* Contact support at <support@messagematch.ai>


---

# Agent Instructions: 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:

```
GET https://messagematch.gitbook.io/messagematch-docs/getting-started/installation/2.-platform-instructions/wix-installation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.