Your loyalty widget is the part of Optimove Loyalty your players actually see — so it should look like the rest of your brand, not like a bolted-on panel.

The Visual Editor lives in the widget configurator and gives you three ways to style it: describe the changes you want in plain language with the AI Editor, adjust specific properties directly in the Theme Editor, or write CSS yourself in Theme CSS. You can customize colors, fonts, backgrounds, borders, and more across every section of the player widget — no developer required.

This guide will walk you through all three editors, from opening the Visual Editor to restoring an earlier version of your theme.

How the Visual Editor Works

Navigate to Optimove Loyalty → Visual Editor → Widgets to open the editor. Three tabs sit at the top of the panel:

• AI Editor: a chat interface (the Theme Assistant). Describe how you want your widget to look in plain text, and the styling is applied for you.
• Theme Editor: a structured, form-based editor. Pick a Widget Section and adjust its specific properties — fonts, colors, opacity — with no prompt required.
• Theme CSS: full manual control over the underlying design tokens and CSS.

Two controls apply across all three tabs:

• Reset to Default: discards your customizations and restores the default styling. Your version history is preserved, so you can still revert to a previous version afterward.
• Versions: opens the version history panel.

A live Preview of your widget is always shown on the right as you work.

How to Style Your Widget with the AI Editor

Open the AI Editor

The chat panel appears on the left, with a live preview of your widget on the right.

1. Navigate to Optimove Loyalty → Visual Editor → Widgets.
2. Select the AI Editor tab.

Reset to Default (Optional)

To start from a clean slate, click Reset to Default at the top of the page before you begin.

Pick a Component (Optional)

Selecting a component first scopes your description to that element only.

1. Click the pointer icon next to the chat input.
2. Click the element you want to change directly in the live preview. The component is outlined and tagged with its name (for example, hero-center-badge) as a chip above the input.
3. To clear the selection, click the ✕ on the chip.

Describe Your Brand Style

1. Type your description into the input field at the bottom of the chat panel.
2. Click Send. If you picked a component in Step 3, your description applies to that component specifically.

A good starting point for a first theme is to paste your brand guidelines or design system as plain text — for example: "Create a widget theme based on the following design system: [paste your brand guidelines here]"

Refine with Follow-Up Messages

Once the initial theme is applied, send follow-up messages to fine-tune specific elements:

• "Change the background of the mission card to white"
• "Set the font family to Montserrat"
• "Set the progress filter border color to #572AF9"

Writing Effective Prompts

The more context you give the assistant, the more predictable and on-brand the result:

• Let the AI decide: give a general direction and let it interpret. A valid starting point when you're exploring, though output may vary. ("Make it look more modern and clean")
• Provide your brand identity: share your brand colors, fonts, and overall style for more consistent results. ("Design a theme using our brand colors: primary #FF6A00, background #ffffff, text #1F2937. Use Inter as the font.")
• Fine-tune specific elements: once you have a base theme you like, follow up with targeted adjustments. ("Make the mission card background white")

Component Names Reference

Using the correct component name gives you precise control over which element changes.

How to Use the Theme Editor

The Theme Editor gives you direct, form-based control over specific style properties — no prompts required.

1. Navigate to Optimove Loyalty → Visual Editor → Widgets and select the Theme Editor tab.
2. Choose a Widget Section from the dropdown to scope what you're styling — for example Global Components / Main Settings, or a specific area such as Hero, Menu, or Missions.
3. Adjust the fields shown for that section. Available fields depend on the section selected. Global Components / Main Settings, for example, exposes:
   • Font Family — a dropdown (for example, Inter)
   • Background — color and opacity
   • Text — color and opacity
   • Separator: Background — color and opacity
4. Click Save in the top right to apply your changes.

How to Use Theme CSS

For full control, or to reach styling the Theme Editor doesn't expose, use Theme CSS.

1. Navigate to Optimove Loyalty → Visual Editor → Widgets and select the Theme CSS tab.
2. Choose a Widget Section from the dropdown (for example, Global) to scope what you're viewing.
3. Switch between the three sub-tabs:
   • Theme Variables — the widget's design tokens, defined as CSS custom properties on :root (border radius, shadow, and font size/weight scales). Editing a token updates it everywhere it is referenced.
   • CSS — the resulting CSS for the selected section.
   • Custom CSS — write your own CSS to override or extend the theme beyond what Theme Variables and the Theme Editor expose.
4. Click Save in the top right to apply your changes.

Managing Versions

Every change you make — in the AI Editor, Theme Editor, or Theme CSS — is saved as a version you can review or restore.

1. Click Versions (N) in the top right to open the version history panel.
2. Review the entries. Each one shows which tab made the change, a summary of what changed, and the date.
3. Click the revert icon (↺) next to a version to restore the widget to that point.
4. Click the delete icon to remove a single version, or Delete all to clear the entire history.

Key Elements to Keep In Mind

• One active theme per brand. Each brand has a single active theme. Avoid having multiple team members edit the same brand at the same time — changes may overwrite each other.
• Paste text, not files. The AI Editor chat doesn't support file attachments. Copy the relevant text from a brand guidelines PDF or design system document directly into the chat.
• Your chat isn't saved, but your theme is. Refreshing the page clears the AI Editor's conversation history. The applied theme is preserved as a version, but further changes need to be described in a new session.
• Menu and top bar icons. Icon colors in the left navigation and top bar are image assets and can't be changed through the AI Editor.

If you'd rather build your own widget frontend instead of styling the standard one, see the Custom Widget UI Integration Guide in the Optimove Developer Hub.