On this page

Add HTML blocks

HTML blocks let you show announcements, banners, and guidelines in the dialog. The dialog has two independent blocks: HTML (top) above the external links and HTML (bottom) below them. If you use dialog variants, each variant has its own blocks. For examples, see Landing Pages & News.

Before you start

Work on the master instance. Secondary instances show this configuration but don’t let you edit it.

Steps

In Jira, select the cog icon and go to Marketplace apps > UniPortal > Configuration.
If you use dialog variants, open the Dialog variant field and select the dialog you want to edit.
On the General settings tab, find HTML (top), above the external links, and HTML (bottom), below them.
Enter your HTML in one or both fields.
Select Save changes.

Tip

You can generate the HTML with an AI assistant such as ChatGPT, Gemini, or Claude. Describe the banner you want, check the result, and paste it into the field.

Show the customer’s name

A placeholder shows data of the customer who opens the dialog. UniPortal replaces it before it shows the block. Placeholders work in HTML (top) and HTML (bottom). The list of placeholders is shown below each field.

Placeholder	What it shows
`{{user.displayName}}`	The display name of the signed-in customer.
`{{user.displayName\|there}}`	The display name, or the text after the pipe (here, “there”) when the name isn’t available.

In HTML (top) or HTML (bottom), enter your HTML with the placeholder, for example <h4>Welcome, {{user.displayName}}!</h4>.
Select Save changes.

In the layout editor, the preview shows your own name. Without a fallback, an unavailable name shows as empty text. A customer’s name is always shown as plain text, so it can’t run HTML or scripts. UniPortal still removes script tags from your own HTML.

Result

The dialog shows each block that has content: HTML (top) above the external links and HTML (bottom) below them. A block you leave empty doesn’t appear.

UniPortal saves your HTML exactly as you enter it. When it shows the block, it removes script tags and event-handler attributes. Links inside the HTML open through the portal’s own navigation instead of as plain browser links.

Example

The banner in the screenshot comes from this code in HTML (top):

1
<div style="background:linear-gradient(135deg,#0c66e4,#6e5dc6);color:#fff;padding:20px 24px;border-radius:12px;font-family:Arial,sans-serif">
2
  <div style="font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.85">Service desk notice</div>
3
  <div style="font-size:20px;font-weight:700;margin:4px 0">Scheduled maintenance this Saturday</div>
4
  <div style="font-size:14px;opacity:.95">Email and VPN will be unavailable from 22:00 to 24:00. Please plan urgent requests ahead of time.</div>
5
</div>

The two cards below it come from HTML (bottom):

1
<div style="display:flex;gap:16px;font-family:Arial,sans-serif">
2
  <div style="flex:1;border:1px solid #dfe1e6;border-radius:12px;padding:16px 20px;background:#f7f8f9">
3
    <div style="font-size:13px;color:#626f86;text-transform:uppercase;letter-spacing:.06em">Urgent issue?</div>
4
    <div style="font-size:16px;font-weight:700;color:#172b4d;margin-top:4px">Call +48 22 000 00 00</div>
5
    <div style="font-size:13px;color:#44546f;margin-top:2px">Monday to Friday, 8:00 to 18:00</div>
6
  </div>
7
  <div style="flex:1;border:1px solid #dfe1e6;border-radius:12px;padding:16px 20px;background:#f7f8f9">
8
    <div style="font-size:13px;color:#626f86;text-transform:uppercase;letter-spacing:.06em">Not sure where to start?</div>
9
    <div style="font-size:16px;font-weight:700;color:#172b4d;margin-top:4px">Read the IT handbook</div>
10
    <div style="font-size:13px;color:#44546f;margin-top:2px">Answers to the 20 most common questions</div>
11
  </div>
12
</div>