---
title: HTML element
slug: html-code
description: How the HTML element works in Personizely widgets: adding custom markup, why script tags don't run and where to put JavaScript instead, and styling.
image: https://archbee-image-uploads.s3.amazonaws.com/1y1Fr-DMGy_apx7FwibyA/ORDTWfNKMXiY3ZRv0QSgP_personizely-docs-og.png
docTags: 
createdAt: 2026-10-16T20:16:53.240Z
---

The HTML element adds your own markup to a widget: an embed iframe, a custom table, a badge, or markup no other element provides. It's display-only: it has no action or automations.

**Available on:** all platforms.

:::hint{type="warning"}
**`<script>` tags inside an HTML element don't run.** The markup is inserted into the page as content, and browsers don't execute scripts added that way. Put JavaScript in the widget's **custom JS** (see [Widget settings](https://docs.personizely.net/widget-display-options)), which runs each time the widget is shown, or in an [Execute JavaScript code](https://docs.personizely.net/execute-javascript-code) automation on a button or form.
:::

## Options

| Option            | What it does                                                                                   | Values / default                         |
| ----------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------- |
| Code              | The HTML to insert, in a code editor (open it full size for longer snippets)                   | `<div>Your custom HTML goes here.</div>` |
| Style             | Border, radius, shadow, opacity, size, margin, position; hover and focus states                | —                                        |
| Device, Animation | See [Widget elements](https://docs.personizely.net/widget-elements#settings-every-element-has) | —                                        |

## Behavior details and limitations

- **Published as written.** The editor shows a sanitized preview, but your site gets the HTML exactly as you wrote it. Check it on your site with [Preview and QA](https://docs.personizely.net/preview-qa).
- **Inline event handlers and `<style>` tags work** like any other markup on your page. Prefer the widget's custom CSS for styles, so they're removed when the widget closes.
- **Dynamic text works.** Placeholders such as `{visitor.firstName or 'there'}` in text and in `href` or `src` attributes are replaced. See [Dynamic text](https://docs.personizely.net/dynamic-text).
- **Your site's CSS applies.** Widgets render in your page, so theme styles for tags like `table`, `a` or `p` affect your markup. Use classes and the widget's custom CSS to override them.
- **Third-party embeds** that need a script to initialize (for example review widgets or Instagram embeds) won't initialize from this element. Use iframes, or initialize them from the widget's custom JS.
- **Keep it valid.** Unclosed tags can break the layout of the rest of the widget step.

## Example

A size guide table in a popup opened by a [Click trigger](https://docs.personizely.net/click-trigger) on a "Size guide" link:

```html
<table class="size-guide">
  <tr><th>Size</th><th>Chest (cm)</th></tr>
  <tr><td>S</td><td>88–94</td></tr>
  <tr><td>M</td><td>95–101</td></tr>
</table>
```

## Related

- [Widget settings and custom code](https://docs.personizely.net/widget-display-options)
- [Execute JavaScript code](https://docs.personizely.net/execute-javascript-code)
- [Dynamic text](https://docs.personizely.net/dynamic-text)
- [Widget elements](https://docs.personizely.net/widget-elements)