🎨 Design, Colours And Mobile

The Design tab keeps the choices small on purpose, because a campaign that matches your site converts better than one that shows off.

Colours:

Start from one of five quick presets: amber, white, blue, green and rose. Each preset sets all four colours at once. From there you can set each colour by hand:

  • Background
  • Text
  • Button background
  • Button text

Shape and motion:

  • Corner rounding, from 0 to 40
  • Drop shadow, on or off
  • Entry animation: slide, fade, zoom, bounce or none

Placement, which changes with the family:

  • Bars: top or bottom of the page, plus an option to push the page down instead of overlapping it
  • Sticky side tab: left edge or right edge
  • Popups: narrow, medium, wide or full width, plus dim the page behind and blur the page behind
  • Slide in: which of the four corners it comes from
  • Side drawer: left or right
  • Sheet: top or bottom edge

Mobile:

There is a single hide this campaign on mobile toggle. Combined with the device checklist on the Targeting tab, that gives you two ways to keep a heavy format off phones. A welcome mat, for example, is usually better hidden on mobile.

Respecting the visitor:

Engage checks the operating system prefers reduced motion setting and drops its entry animations for anybody who has asked for less movement. Escape closes a popup, focus is trapped inside it while it is open, and focus is returned when it closes.

The Content tab has one more design relevant control: show a close button. Visitors can always close a popup, but a bar can be made permanent by turning it off, which suits a cookie notice or an entry gate.

Ready to stop reading and start using?

Every plugin documented here works alongside the others, managed from one ResultsAIx Hub.