--- title: Code description: "The Code field puts a small code editor into a custom widget you build with the Master Addons [Widget Builder](https://master-addons.com/widget-builder/). Editors paste a snippet, such as the badge HTML a payment provider hands out, and the field keeps it readable…" url: "https://master-addons.com/docs/widget-builder/code/" updated: "2026-09-18" category: Widget Builder --- # Code The Code field puts a small code editor into a custom widget you build with the Master Addons [Widget Builder](https://master-addons.com/widget-builder/). Editors paste a snippet, such as the badge HTML a payment provider hands out, and the field keeps it readable with line numbers and syntax highlighting. It's the field for markup that has to be pasted rather than typed as prose. Code is a Pro field. The free plugin includes a limited Widget Builder, and the full set of fields comes with [Master Addons Pro](https://master-addons.com/pricing/). ![Code field settings in the Master Addons Widget Builder next to the code editor in Elementor for a trust badge widget](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/18025928/widget-builder-01-code-field-hero.webp) ## What the Code field does - Adds a code editor to your widget's panel in Elementor, with line numbers and highlighting. - Highlights in the language you choose, from HTML and CSS to JSON, SVG and PHP. - Saves whatever was pasted as text. - Prints it through a token such as `{{ badge_markup }}`, cleaned with WordPress's own post content filter so allowed HTML renders and script tags are dropped. - Has a `raw` filter for the rare case where a snippet has to go out untouched. New to the builder? Read the [Widget Builder overview](https://master-addons.com/docs/widget-builder/widget-builder-settings/) first, then come back with a widget open. ## Before you start - WordPress with Elementor installed and active. - Master Addons for Elementor and Master Addons Pro, both active. The [installation guide](https://master-addons.com/docs/getting-started/installing-plugin/) covers setup. - A widget open in the Widget Builder. The example in this guide is a "Trust Badges" widget: a Text field for the heading and a Code field named `badge_markup` that takes the provider's badge HTML. ## How to add a Code field 1. Go to **Master Addons > Widget Builder** and open your widget. 2. Add a section on the **Content** tab, for example "Badges". 3. Type `code` in the field search box on the left. 4. Drag **Code** into the section. Click the pencil on the field to open its settings. ![Code field found by searching code in the Widget Builder with a Badge Markup field in the Badges section](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/18025932/widget-builder-02-add-code-field.webp) ## Code field options explained ![Code field options with Label, Name, Description and a Language dropdown set to HTML](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/18025935/widget-builder-03-code-field-options.webp) - **Label:** the text above the editor in Elementor, for example "Badge Markup". - **Name:** the field's unique ID and the name of its token. Use letters, numbers and underscores only, for example `badge_markup`. - **Description:** a hint shown under the editor in Elementor. Use it to say what the field expects, such as "Paste the HTML your payment or review provider gives you." - **Language:** the highlighting mode. The list has HTML, CSS, SASS, SCSS, JavaScript, JSON, LESS, Markdown, PHP, Python, MySQL, SQL, SVG, Text, Twig and Typescript. HTML is the default. Language changes highlighting only. It doesn't limit what an editor can paste, and it doesn't change how the value is printed. The panel has no Default Value and no height setting for this field, so the editor always opens empty at its standard height. Turn on **Label Block** so the label sits above the editor instead of squeezing beside it. Under Common Settings you'll also find **Show Label**, **Separator** and [Conditions](https://master-addons.com/docs/widget-builder/conditions/), which work the same as on other fields. Leave **Selector** empty: a pasted snippet isn't a CSS value. ## Print the code in your template Put the token where the snippet should land, and guard it so an empty field leaves no wrapper behind: ```

{{ tb_heading }}

{% if badge_markup %}
{{ badge_markup }}
{% endif %}
``` ![Widget HTML printing the badge_markup token inside an if block](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/18025938/widget-builder-04-code-html-template.webp) Style the wrapper in the CSS panel as usual. The snippet itself brings whatever classes the provider gave it, so it's worth adding your own wrapper class to control spacing and alignment. ### What the token strips The value goes through the same filter WordPress uses for post content. Tags allowed in posts come out as pasted: `div`, `span`, `a`, `img` and the rest. Script tags and iframes are removed. One detail is worth knowing before you hand the widget to a client. In our tests, a pasted script tag was removed but the JavaScript inside it stayed on the page as plain text, so the visitor saw a line of code in the middle of the widget. Nothing warns you about it. Test a provider's snippet on a draft page once, and tell editors to paste markup only. ![Comparison of the default token, which removes the iframe and script tag, and the raw filter, which keeps them](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/18025948/widget-builder-07-code-sanitized-vs-raw.webp) ### The raw filter Adding `raw` to the token prints exactly what was pasted, scripts and iframes included: ``` {{ badge_markup|raw }} ``` In our tests that version kept the iframe and ran the script. That's useful for an embed you control, and risky everywhere else, because anyone who can edit the widget can then run JavaScript on the page. Use it only when every editor of that page is already trusted with unfiltered HTML, and keep the plain token for widgets clients touch. The template engine also accepts `trim`, `upper` and `lower` on a token, which are occasionally handy for a short snippet of plain text. ## Use the Code control in Elementor Add the widget to a page, or reload the editor if the page was already open. The field shows as a dark editor block under your label, with line numbers down the side. Paste the snippet and the preview updates as soon as you click away. ![Elementor panel with the Ace code editor showing pasted badge HTML and the rendered badges in the preview](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/18025941/widget-builder-05-code-elementor-editor.webp) The editor is a small window, so a long snippet scrolls inside it. That's fine for pasting, less so for reading; write the snippet somewhere roomier if you plan to edit it by hand. Here is the finished widget on the front end, built from three pasted badge blocks: ![Trust badge widget on the front end showing three badges built from the pasted HTML](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/18025944/widget-builder-06-code-front-end-result.webp) ## Common use cases - Payment, review and trust badges that providers hand out as HTML. - Schema or structured data blocks an editor needs to paste per page. - Small SVG icons or logos pasted as markup. - A short CSS or JSON snippet your widget's script reads. ## Tips for working with the Code field - **Say what to paste in the Description.** Editors can't tell from an empty editor what the field expects. - **Guard the token with `{% if %}`.** An unused field would otherwise leave an empty wrapper on the page. - **Test a real provider snippet once.** That's how you find out which parts survive the filter. - **Keep `raw` for trusted editors only.** The plain token is the safe default for client sites. - **Formatted text rather than markup?** Use the [WYSIWYG field](https://master-addons.com/docs/widget-builder/wysiwyg/) so editors get a visual editor instead of code. ## Frequently Asked Questions Is the Code field free? No. Code is one of the Pro fields in the Widget Builder, so Master Addons Pro has to be active before you can add it to a widget. Can I set a default snippet or make the editor taller? Not from the field settings. The panel has a Label, Name, Description and Language, so the editor always opens empty at its standard height. Why did part of my pasted snippet disappear? The token runs the value through WordPress's post content filter, which removes script tags and iframes. Use markup the filter allows, or the raw filter if every editor of that page is trusted with unfiltered HTML. Why is JavaScript showing up as text in my widget? A pasted script tag was removed but its contents stayed behind as text. Take the script out of the snippet, or print the field with the raw filter if the script is meant to run. Does the Language setting restrict what editors can paste? No. It only changes the syntax highlighting in the editor. ## Wrapping up Drop a Code field into a Content section, pick the language, write a Description that says what to paste, and print the token inside an `{% if %}` guard. Keep the plain token for client sites and reach for `raw` only with trusted editors. For rich text instead of markup, see the [WYSIWYG field](https://master-addons.com/docs/widget-builder/wysiwyg/), and check [pricing](https://master-addons.com/pricing/) for what each plan includes.