# 3. Page Element Selection

## Element Selector Types

The following are various methods we've created for tagging content blocks on different web builders, due to the variance of accessibility to the necessary header code and CSS element features on those platforms.

### Chrome Extension (Recommended)

The Chrome Extension is the easiest and most universal way to tag elements on your website, just download point, and click! Then the MatchAgent will know exactly what content blocks to target.

1. Download from the Chrome Web Store as 'MessageMatch Widget Configurator'. After downloading, you can pin the extension to your browser bar for easy access.
   * <https://chromewebstore.google.com/search/messagematch>
2. Log in to the Chrome extension with the same MessageMatch account login credentials.&#x20;
3. Navigate to a browser tab of the website you're looking to integrate with.
   * Be sure you are viewing in the browser of the website URL, and not on the web builder of that site, for accurate tagging to take place.
   * The Chrome Extension can verify if that page has the MatchAgent already installed. If not found, it will prompt you to return to the dashboard so that the prior step can be completed.
4. Within the Chrome extension widget, click on the button for element selector type, choosing either the content or conversion tag selector to apply to each.
5. Hover your mouse over the page element you want the MatchAgent to update. Point and double-click on that element to tag it.
   * The element ID should then appear on the widget, listed under the content or conversion tag sections, and be automatically saved to the MatchAgent's settings.
   * These tagged sections can be verified either from the dashboard's Manage MatchAgents' advanced tab, or by testing the live page by appending an allowed listed UTM to the URL and refreshing the page.

{% hint style="warning" %}
When tagging content blocks, be sure that only the specific text element is selected, and not any of the larger element structures that it might be contained within. Tagging larger elements could result in the MatchAgent not working or updating the text to the wrong div class on the page.
{% endhint %}

## Manual Installs

### How do I choose the right selector type?

* [**Default**](/messagematch-docs/getting-started/installation/basic-configuration.md#default): Use for GoHighLevel, WordPress, and most websites
* [**Custom Classes**](/messagematch-docs/getting-started/installation/basic-configuration.md#custom-classes): Use for ClickFunnels, Leadpages, and platforms with custom CSS
* [**Custom IDs**](#custom-ids): Use for Infusionsoft, Systeme.io, and platforms with element IDs

{% hint style="info" %}
Please see the [Platform Specific Instructions](/messagematch-docs/getting-started/installation/2.-platform-instructions.md) for more specific, detailed onboarding instructions.
{% endhint %}

### Default

Perfect for GoHighLevel, WordPress, and most websites where custom CSS class fields are made available.

```html
<h1 class="content1">Original Headline</h1>
<p class="content2">Original description text</p>
<button class="conversion1">Sign Up</button>
<a href="#" class="conversion2">Learn More</a>
```

{% hint style="warning" %}
Be sure that content1, content2, etc., and conversion1, conversion2, etc. are all lowercase, and there is no space between the word and number.&#x20;
{% endhint %}

{% hint style="warning" %}
As you tag different elements on your page, be sure that they are labeled in the proper sequential order, in the correctly numbered descending fashion (without duplicating or skipping numbers). Double-check if numbering is fluid when making edits to your page.
{% endhint %}

{% hint style="info" %}
This method does not require returning to the dashboard to specify content classes to the MatchAgent; onboarding will be completed after this step.
{% endhint %}

### Custom Classes

For ClickFunnels, Leadpages, and platforms where you can specify the custom CSS classes.

```html
<h1 class="my-headline-class">Original Headline</h1>
<p class="my-description-class">Original description</p>
<button class="my-cta-button">Sign Up</button>
```

{% hint style="info" %}
You'll need to specify these class names in your MatchAgent settings -> Advanced tab -> Element Selection -> Custom Classes.
{% endhint %}

{% hint style="info" %}
Make sure that the various class names are identical for the MatchAgent to register them.
{% endhint %}

### Custom IDs

For Infusionsoft, Systeme.io, and platforms where you can set element IDs.

```html
<h1 id="main-headline">Original Headline</h1>
<p id="main-description">Original description</p>
<button id="signup-button">Sign Up</button>
```

{% hint style="info" %}
You'll need to specify these class names in your MatchAgent settings -> Advanced tab -> Element Selection -> Custom IDs.
{% endhint %}

{% hint style="info" %}
Make sure that the various content and conversion IDs are identical for the MatchAgent to register them.
{% endhint %}

#### Please let us know if you have any questions at <hello@messagematch.com>


---

# 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/basic-configuration.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.