Designing Banners

Color and style

Each banner has two color settings:

• Background color: The banner’s background. Default is white (#ffffff).
• Text color: Applied to the title, body text, CTA button, and close button. Default is black (#000000).

Enter hex color codes in the banner form. For a dark banner, set the background to a dark color and the text to white.

Position

Banners can appear at the top or bottom of the viewport. Choose the position that works best with your website’s layout. Top banners push content down; bottom banners float above the page content.

You can also override the position per page using the data-position attribute on the script tag:

<script
  src="https://cdn.tolinku.com/banner.js"
  data-key="tolk_pub_your_key"
  data-position="bottom"
  async
></script>

Theme presets

The banner script supports two quick theme presets via the data-theme attribute:

• data-theme="light": White background, dark text.
• data-theme="dark": Dark background, light text.

Theme presets are a shortcut. Colors set in the dashboard take priority.

Best practices

• Keep text short: Banners have limited space, especially on small phones. One line for the title and one for the body is ideal.
• High contrast: Make sure the text color has strong contrast against the background. A white banner with light gray text is hard to read.
• Match your brand: Use your app’s primary brand color for the background so the banner feels intentional, not intrusive.
• Clear CTA: Use action verbs like “Open”, “Install”, or “Get” for the button. Avoid vague text like “Learn More”.