How to apply your branding to microexperiences

Pathmonk gives you several ways to apply your branding so microexperiences look consistent with your website. You can style everything during onboarding or adjust it later from your dashboard. Below is an overview of all customization options and how they work.

1. Branding during onboarding (recommended before publishing)

In the final onboarding step, Pathmonk prompts you to set a few core branding elements. These don’t take long, and they help ensure that your first version looks aligned with your brand.

You can update:

• Logo – appears on your Micro-Experiences to add familiarity and trust

• Video avatar – choose a starter avatar; you can replace it with your own video later

• Background – solid color or an uploaded image

• Font family – pick a font that matches or complements your website

• Primary color – used for buttons and key UI elements

None of these steps are mandatory to publish, but completing them upfront avoids the feeling of a “generic” starting point once you're live. If you're unsure about fonts or colors, start with the basics during onboarding. You can refine everything after publishing.

2. Update your branding anytime under Micro-Experiences > Design

Once your account is live, all appearance settings can be updated at any time from: Accelerate Growth > Micro-Experiences > Design. This is where you can adjust the visual details as many times as you need. 

You’ll find options to:

• Change your font

• Update your background (color or upload a new image)

• Modify CTA color, text, and background colors

• Preview how the card will look before saving

3. Advanced styling with CSS (optional but powerful)

For teams with strict brand guidelines or very specific requirements, Pathmonk supports custom CSS. This allows full control over the look and layout of the cards. You can access this feature via Accelerate Growth > Micro-Experiences > Design > scroll down to 'Advanced Style Customization'.

You can use custom CSS to:

• Adjust spacing (padding, margins, card height/width)

• Override default typography

• Add subtle hover effects

• Modify borders, shadows, or other UI details

• Hide certain elements if they aren’t relevant for your design

Below is an example from one of our customers with CSS overwriting our system defaults:

This is ideal if:

• You follow a detailed design system

• You need visual consistency across multiple languages or markets

• Your brand uses spacing, alignment, or visual patterns that aren’t available in the default UI

Adding the following styles will make the element look & feel like your exact website style.

Use the !important tag to ensure to apply your required changes.

To see the final version exactly as it will appear to visitors:

1. Go to the preview page:
   https://crm.pathmonk.com/dashboard/assistant/smartcards_preview

2. Select the microexperience you want to test.

3. Click See live to display the full, styled version.

This preview simulates the real visitor experience, including any custom CSS applied.

Not seeing a new image or video?

If your updates don't appear when previewing, it’s most likely due to browser caching. Browsers sometimes store older assets, which prevents new uploads from showing immediately.

Fix: Clear your browser’s cache. Once it's cleared, refresh the preview and your changes should display correctly.

If you still need help with your microexperiences, get in touch with our team at support@pathmonk.com and we'll get you ready for success.