# HTML

### Custom HTML <sup><sub>*<mark style="color:green;">\[Pro]</mark>*<sub></sup>

You can completely rewrite the HTML of the popup if you want, entering your own format and entering in custom tags that will insert dynamic content. [See an example here](https://wpmaps.mapster.me/examples/mapster-wp-map/sample-custom-html-popup/).

<figure><img src="https://350198811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK5R35dCakOT16UkavAw2%2Fuploads%2FvievTNx64omOh1zzcZdf%2Fcustom-html.PNG?alt=media&#x26;token=6659791b-d96a-481a-b793-0942e8f1a07d" alt=""><figcaption></figcaption></figure>

### Dynamic Tags <sup><sub>*<mark style="color:green;">\[Pro]</mark>*<sub></sup>

By using the tags indicated in the description of the field, you can enter in tags that will be replaced in the front end with data of that feature post. These include:

* Header Text `{header}`
* Image URL `{image_url}`
* Content `{content}`
* Button Link `{button_url}`
* Button Text `{button_text}`
* Post Title`{post_title}`&#x20;

### Custom Fields <sup><sub>*<mark style="color:green;">\[Pro]</mark>*<sub></sup>

You can also reference ACF fields or custom properties that you've added to your data, similar to elsewhere in the plugin. For custom properties, add the name of the field:

<figure><img src="https://350198811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK5R35dCakOT16UkavAw2%2Fuploads%2FxQsls2IGxsotTCP7wtMo%2Fcustom-properties.PNG?alt=media&#x26;token=7ebf781e-7f4a-4fcc-a4ea-9819a81d7bbe" alt=""><figcaption></figcaption></figure>

So, in the case of the above, if you wanted to add "name" into your popup, you would add:

```
<div>Some custom {name} HTML</div>
```

For ACF fields, use the field name (not the field ID). So for the following:

<figure><img src="https://350198811-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FK5R35dCakOT16UkavAw2%2Fuploads%2FlNctaUPJLOYAJioNPatl%2Facf-field-keys.PNG?alt=media&#x26;token=4ec31c36-ddab-4336-b50f-eb0d3b224f1f" alt=""><figcaption></figcaption></figure>

If you wanted to add the "School name", you would add:

```
<div>My custom {school_name}</div>
```
