Skip to content
Tolinku Docs

Designing Banners

Color and style

Section titled “Color and style”

Each banner has two color settings in the dashboard:

  • Background color: The banner’s background. Default is white (#ffffff).
  • Text color: Applied to the title, body, 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.

For finer control (separate title, body, and CTA colors; custom border; custom shadow) override at the script tag using data attributes. See the banner script reference for the full list.

Position

Section titled “Position”

Banners can appear at the top or bottom of the viewport:

<script
  src="https://your-app.tolinku.com/banner.js"
  data-position="bottom"
  async
></script>

Style: pinned, floating, or stacked

Section titled “Style: pinned, floating, or stacked”

Banners render in one of three visual styles:

  • Default (pinned): edge-to-edge bar fixed at the top or bottom of the viewport. Pushes the page content down to make room. Best for simple sites without a fixed header.
  • Floating: rounded card with margin around it. Overlays page content without pushing it. Best for marketing pages and hero sections.
  • Stacked (above page header): injects the banner into the page flow above your site’s header element. Sticky at the top of the viewport while scrolling. Best when your site already has a fixed or sticky header — stacked avoids covering your navigation.

Set the Style field in the banner editor to choose the default for that banner. The live preview updates as you switch.

You can also override the style per page from the script tag:

<script
  src="https://your-app.tolinku.com/banner.js"
  data-style="stacked"
  async
></script>

The script-tag value wins over the dashboard setting. For stacked mode you can also pass data-anchor="#my-header" to control exactly which element the banner is injected before. Floating banners pair well with custom corner radius (data-radius) and margin (data-margin) for a modern, app-like feel.

Animation

Section titled “Animation”

Choose how the banner enters and exits:

  • slide (default): slide in from the edge.
  • fade: fade in without motion. Great with floating style.
  • pop: scale-and-fade with a slight overshoot. Floating only.
  • none: appear instantly, no transition.
<script
  src="https://your-app.tolinku.com/banner.js"
  data-style="floating"
  data-animation="pop"
  async
></script>

pop automatically downgrades to slide when used with the pinned style, because a scale animation looks broken against the viewport edge.

Theme presets

Section titled “Theme presets”

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

  • data-theme="light" (default): white background, dark text.
  • data-theme="dark": dark background, light text.

Theme presets are a starting point. Colors set in the dashboard, and any data-bg / data-title-color / etc. on the script tag, take priority.

Fine-grained typography and color

Section titled “Fine-grained typography and color”

For full control of every element (title, body, CTA), use the per-element data attributes. Common combinations:

<!-- Branded blue banner with white pill CTA -->
<script
  src="https://your-app.tolinku.com/banner.js"
  data-style="floating"
  data-bg="#3B82F6"
  data-title-color="#ffffff"
  data-body-color="#dbeafe"
  data-cta-bg="#ffffff"
  data-cta-color="#3B82F6"
  data-shadow="lg"
  async
></script>


<!-- Larger title, hide the body text -->
<script
  src="https://your-app.tolinku.com/banner.js"
  data-title-size="16"
  data-hide-body
  async
></script>

The full list of attributes (icon size, border, font weights, custom CSS class hook, and more) lives in the banner script developer reference.

Best practices

Section titled “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”.
  • Pick the right style for the site: Pinned for content-heavy pages where the user expects the layout to shift. Floating for marketing pages, hero sections, and modern app-like UIs.