Portal Design – Make It Yours

Your portal is where customers come to share ideas and see what you've done with them. Making it look and feel like your product builds trust and brings people back. This guide covers what you can change, planning a feedback home, the custom code boxes and where each one appears, building a home page with Liquid, styling with CSS, adding JavaScript safely, and testing before you launch.

What you can change

Most teams start with the basics and add custom code only when they want the portal to match their product closely. Custom code, white labeling, and your own domain depend on your plan.

Plan your feedback home

A good feedback home answers three questions in the first screen: what is this, what can I do here, and does anything happen when I do?

Do and don't

• Use your product's fonts and colors, and keep text contrast high.
• Link back to your product and your help center.
• Keep the page fast: small images, one or two fonts.

• Hide the search box or the way to post an idea.
• Promise dates or features in the home page copy.
• Rebuild UserVoice's own idea list or voting from scratch.

Turn on custom code

Custom code lives in one place: the HTML/CSS/Javascript tab of the portal's design settings.

1. In Settings, open Web portal, then Appearance and features, and select Edit.
2. Open the HTML/CSS/Javascript tab, and tick Enable custom HTML/CSS/Javascript. Confirm that you accept the risks of custom JavaScript.
3. Fill in the boxes you need. Leave the header and footer blank to keep UserVoice's defaults.
4. Save. Changes are live for every visitor right away.

The custom code boxes

Each box fills one part of every portal page. All of them accept Liquid, UserVoice's template language.

Build a home page

The HOME PAGE box is a Liquid template. Mix your own HTML with UserVoice's data and building blocks. Leave it blank to keep the default home page.

<section class="hero">
  <h1>{{ site.title }}</h1>
  {{ site.body_html }}
  {{ render_sidebar }}
</section>

<section class="forums">
  {% for forum in site.forums %}
    <a class="forum-card" href="{{ forum.url }}">
      <h2>{{ forum.name }}</h2>
      <p>{{ forum.suggestions_count }} ideas</p>
    </a>
  {% endfor %}
</section>

{% if site.portal_roadmap_enabled %}{% render_roadmap %}{% endif %}

Data you can use

{% if site.recently_updated_suggestions.size > 0 %}
  <h2>{{ "Recently updated" | translate }}</h2>
  {% for idea in site.recently_updated_suggestions %}
    <a href="{{ idea.url }}">{{ idea.title }}</a>
    <span class="status">{{ idea.status_name }}</span>
  {% endfor %}
{% endif %}

• Translate your own text with the translate filter, so translated portals read naturally.
• Show different content to signed-in and anonymous visitors by checking current_user.
• Keep the skip link working: give your main content the ID start-of-content.

Style it with CSS

Your CSS loads before UserVoice's own styles, so make your selectors more specific instead of reaching for !important.

/* Win with specificity, not !important */
.site3 .uv-home-page .hero { padding: 48px 0; }
.site3 .uv-forum-page .uvIdeaTitle { font-size: 20px; }

/* Different looks for signed-in and anonymous visitors */
.uv-no-user .hero .welcome { display: block; }

• Prefer page and visitor classes over UserVoice's inner component classes, which can change.
• Load fonts with a link tag in HEAD, not with @import.
• Keep CSS small, under about 40 KB. It loads on every page.

Add JavaScript carefully

JavaScript runs on every portal page, for every visitor. Treat it like code on your own website.

<script>
  // Runs on every portal page. Keep it small, and don't rely on
  // UserVoice's internal markup, which can change.
  document.querySelectorAll('.footer-year').forEach(function (el) {
    el.textContent = new Date().getFullYear();
  });
</script>

• Wrap scripts in script tags in the JavaScript box.
• Escape Liquid: the box is read as Liquid first, so wrap code that uses double curly braces in raw and endraw tags.
• Use only scripts you trust. With custom code on, the portal doesn't restrict where scripts load from.
• Don't depend on UserVoice's internal markup. Use your own elements, or the page and visitor classes.

Beyond the portal

Custom code changes portal pages only. A few other places need their own settings to match your brand.

Test before you launch

Check every kind of page, as every kind of visitor, before you call it done.