HTML Editor

The HTML Editor gives you full, code-level control over the on-site messages your website visitors see. If you are comfortable with HTML and CSS, or your design team hands you ready-made markup, it is the fastest way to build pixel-perfect popups and banners that match your brand, enriched with personalization tags, dynamic product content, images from your asset library, and coupon codes.

An on-site content is a reusable template. You design and publish it once, then select it in one or more On-Site campaigns, which decide who sees the message, on which pages, and when it is triggered. Typical uses include a welcome discount popup with a unique coupon code, a top banner announcing free shipping, or a personalized product-recommendation popup powered by dynamic content.

📘
Prefer drag & drop?
You can build the same content without writing code: start from the built-in BEE editor instead (see "Design with the BEE editor" below), or use the Visual Editor when creating the on-site item.

Before You Start

Your website must be integrated with the Dengage web SDK so that on-site campaigns can display your content to visitors.
If you plan to insert coupon codes or dynamic content (for example product recommendations), create the coupon list and dynamic contents beforehand so they are ready to select in the editor.
Images should be uploaded to your Dengage image library so you can insert reliable, hosted image URLs.

Step 1: Create the Content and Fill In the General Section

In the Dengage panel, go to Content > Marketing > Onsite. This page lists all of your on-site contents.
Create a new on-site item and choose HTML Editor.
In the General section, enter a Name for your content. The name is how you will recognize the template later when selecting it in a campaign.
Optionally, click Change Folder to store the content in a specific folder, and add a Description that tells teammates what the template is for.
Click Next to unlock the Content section.

General section: name, folder and description

Step 2: Set Up Languages and Layout

Add languages

Your content starts with one language version. To localize it, open the Add Languages menu and pick one of two options:

Copy from Content: duplicates an existing language version, so you only translate the texts.
Create Blank Content: starts the new language from an empty template.

Each language version keeps its own HTML, so you can localize copy, imagery and even layout details independently. Switch between versions using the language tabs.

Add Languages - copy an existing version or start blank.

Select a layout

Under Select Layout, choose how the message appears on your website. Each layout has its own display settings; your HTML is independent of this choice, so you can switch layouts without losing your design.

Popup

An overlay displayed on top of the page: ideal for announcements, discount offers and lead capture.

Setting	What it does
Pop-up Width	Sets the width of the popup container (default 500). Your HTML renders inside this frame.
Close Button ("Add close button to outside")	Adds a ready-made close (✕) button just outside the corner of the popup. Use the color selector or enter a hex code (default #333333) to match your design.
Dismiss on click outside	When enabled, the popup also closes when the visitor clicks anywhere outside it.

Content section with the Popup layout selected.

Banner

A slim strip pinned to the edge of the page: ideal for shipping notices, cookie-style announcements and promo reminders.

Setting	What it does
Layout Position	Shows the banner at the Top or Bottom of the page.
Keep this message in place on scroll	When enabled, the banner stays fixed on screen while the visitor scrolls; otherwise it scrolls away with the page.

Banner layout settings - position and scroll behavior.

Step 3: Build Your Design in the HTML Editor

The HTML Editor tab contains a code editor pre-filled with a blank XHTML skeleton. Write or paste your markup between the <body> tags. The editor provides syntax highlighting and line numbers, and everything you add with the Insert menu is placed at your cursor position.

📘
Need more room?
Click the expand icon in the top-right corner of the editor to open it in full screen. The Insert and BEE editor buttons stay available; click the icon again to return.

Insert menu: personalization and assets

Click + Insert in the editor toolbar to add three kinds of building blocks:

Select a Dynamic Content - Product Box, HTML and Plain Text tabs.

Customization Tags

Customization tags personalize your message per visitor. Choosing Insert > Customization Tags opens the Customization Selector, where you can search and pick the attribute to insert:

Tab	What you can insert
Contact Columns	Attributes from the visitor's contact profile, such as name, email, city, segment and your custom columns.
Device Columns	Attributes of the visitor's device and browser, such as os, browser, device_type and app_version.
Dynamic Contents (Plain Text)	Plain-text dynamic contents you have created earlier (for example a computed value or feed field).
Columns From Segment	Select one of your segments or lists, then insert its columns.
Columns From Remote Segment	The same as above, for remote segments.
Columns From Table	Select one of your data tables, then insert its columns.
System Parameters	Ready-made system values: Unsubscribe Link, Brand Unsubscribe Link, Campaign Name, Campaign Id, Send Id.
Coupons	Select a coupon list to insert a unique coupon code per visitor. The list shows each coupon set's usable/total counts and status (Active, Expired, Archived).

Customization Selector - searchable attributes grouped in tabs.

📘
Note
Flow and Targeting customizations cannot be mixed in the same content. If the content already contains Flow customizations, you can only add Flow customizations. Remove them first if you need Targeting customizations instead.

Image URL

Choosing Insert > Image URL opens the Image Selector, which is your image library. Browse the folders, select an image and click Add to insert its hosted URL at the cursor. Because the file is served from your Dengage library, the URL stays valid wherever the message is shown.

Dynamic Content

Choosing Insert > Dynamic Content opens the Select a Dynamic Content window with three tabs: Product Box (product-recommendation blocks), HTML (reusable HTML fragments) and Plain Text. Pick an existing item, or click the + button to create a new one without leaving the editor. When the message is displayed, the tag is replaced with the live content, for example the products recommended for that visitor.

Prefer drag & drop? Design with the BEE editor

Click Design with BEE Editor in the editor toolbar to open a full-screen drag-and-drop designer. Drag content blocks (Title, Paragraph, List, Image, Button, Divider, Spacer, Social, Dynamic Content, HTML, Video, Icons, Menu and Text) onto the canvas, and fine-tune structure and styling from the Rows and Settings tabs. The toolbar offers desktop/mobile views, Show Structure, its own Preview and Test buttons, and More > Export Template / Upload Template for moving designs between contents. Click Save and Back to return to the HTML editor.

BEE editor - drag and drop blocks with Rows and Settings panels.

❗️
Warning
Saving a BEE design replaces the code in the HTML editor for that language version. If you have hand-written HTML you want to keep, copy it or export it before switching to BEE.

Step 4: Preview Your Design

Switch to the Preview tab to see the message rendered inside a simulated browser window (Desktop) or phone frame (Mobile Web). The preview reflects your layout settings (popup width, close button, banner position), so always check both devices before testing.

Step 5: Test Before You Publish

Click Test in the top bar to open the Test On-Site Template window:

Desktop / Mobile: toggle the preview between device types.
See On Your WebSite: view the template rendered on your actual website.
Send Test Onsite Message: deliver the content as a test on-site message so you can verify it live.
Show Another: refresh the preview with another sample, useful when the design contains personalized or dynamic parts.

Test On-Site Template - check the message before publishing.

Step 6: Save or Publish

When you are happy with the design, use the buttons in the top bar: Save Draft stores your work so you can continue later, while Publish makes the content available for selection in On-Site campaigns. Cancel discards the current editing session.

Show It on Your Website: Use the Content in an On-Site Campaign

Publishing a content does not display it by itself. An On-Site campaign controls where, when and to whom it appears. Go to Campaign > On-Site and create a campaign in four steps:

Settings: schedule, website, audience targeting, trigger conditions and URL rules.
Content: select the on-site content you just published (or create a new one).
Delivery: campaign priority and visitor-based display limits.
Summary & Approval: review everything and activate.

Best Practices

Design mobile-first. A 500 px popup fills a phone screen; keep inner elements fluid and always check the Mobile Web preview and a real device test.
Keep the HTML self-contained. Inline your CSS and keep the markup lightweight so the message renders instantly on any page of your site.
Always leave a way out. Keep the close button on, or enable "Dismiss on click outside". A message a visitor cannot close hurts conversion and brand perception.
Host images in the image library. Library URLs are stable and served by Dengage; hot-linking files from elsewhere risks broken images.
Write personalization with fallbacks. Compose sentences that still read naturally when an attribute is empty for a visitor, and preview with "Show Another" to check different samples.
Keep coupon lists healthy. Only Active lists with usable codes remaining will serve coupons, so monitor the usable/total counts in the Coupons tab.
Reuse instead of rebuilding. Use "Copy from Content" when adding languages, and Export/Upload Template in the BEE editor to move designs between contents.

Troubleshooting & FAQ

My content does not appear on the website.
Check the full chain: the content is published (not a draft), it is selected in an active On-Site campaign whose audience, trigger and URL rules match the page you are testing, and the Dengage web SDK is installed on that page.

The popup looks too wide on mobile.
Reduce the Pop-up Width, make the inner layout fluid (percent-based widths), and verify in the Mobile Web preview before publishing.

I designed in BEE. Can I go back to my hand-written HTML?
Saving a BEE design overwrites the code in the HTML editor. You can keep editing the generated markup as code, but the previous hand-written version is not kept, so copy it somewhere safe before switching.

A personalization tag renders as empty text.
The attribute has no value for that visitor. Use fallback-friendly copy, and test with "Show Another" in the Test window to preview different visitor samples.

No coupon code is shown.
Open the Coupons tab in the Customization Selector and confirm the coupon list is Active and still has usable codes remaining.

Should I use the HTML Editor or the Visual/BEE editor?
Use the HTML Editor when you need exact control or already have coded templates; use BEE or the Visual Editor when you want to compose quickly without code. The layout, personalization, preview, test and publish steps are the same.