Website Banners Guide

As part of our ongoing collaboration, we've created this guide to help you seamlessly integrate promotional banners into your online store using Simpler's SDK. These banners will inform your customers about our latest partnership, highlight special offers, and unlock new opportunities for engagement and growth.

This guide provides all the essential steps for integrating promotional banners delivered via Simpler’s SDK into your online store.

Key Implementation Guidelines

To ensure maximum visibility and effectiveness, it's important that banners are implemented correctly. Please adhere to the following key aspects:

Placement Guidelines: Follow the recommended placements to optimize banner visibility without disrupting the user experience.
Responsive Display: Ensure banners are responsive and adapt seamlessly across different devices and screen sizes for a consistent experience.

By following these guidelines, you can enhance user engagement, improve the shopping experience, and boost conversion rates.

Example Usage

To integrate a promotional banner, include the following HTML snippet in your webpage:

<simpler-banner appId="YOUR_APP_ID" locale="en" variant="strip"></simpler-banner>

info

Replace "YOUR_APP_ID" with your actual application ID provided by Simpler.

Component Properties

Name	Type	default	required
appId	`string`	`undefined`	`true`
locale	`en` \| `el` \| `es` \| `ca` \| `fr` \| `it` \| `de`	`en`	`false`
variant	`horizontal` \| `vertical` \| `strip-header` \| `strip` \| `square`	`undefined`	`true`

appId: Your unique application identifier provided by Simpler.
locale: The language locale for the banner content.
variant: The layout variant of the banner.

Placement Guidelines

To optimize banner visibility without disrupting the user experience, it's crucial to place the banners appropriately within your website. Below are the recommended placements and usage for each banner variant.

Variant - `horizontal`

Ideal for wide horizontal spaces, such as the top or bottom of a webpage or within content sections.

<simpler-banner appId="YOUR_APP_ID" locale="en" variant="horizontal"></simpler-banner>

horizontal

Variant - `vertical`

Best suited for sidebars or narrow vertical spaces on your webpage.

<simpler-banner appId="YOUR_APP_ID" locale="en" variant="vertical"></simpler-banner>

vertical

Variant - `strip-header`

Designed to be placed at the very top of your website, acting as a header strip.

<simpler-banner appId="YOUR_APP_ID" locale="en" variant="strip-header"></simpler-banner>

strip-header

Variant - `strip`

Suitable for placement between content sections.

<simpler-banner appId="YOUR_APP_ID" locale="en" variant="strip"></simpler-banner>

strip

Variant - `square`

Ideal for placements where square dimensions are preferred, such as in product grids.

<simpler-banner appId="YOUR_APP_ID" locale="en" variant="square"></simpler-banner>

square

Handling different shapes

To accommodate various screen sizes and layouts, you may need to render different banner variants based on the device or viewport size. One way to achieve this is by using CSS media queries.

Example Using CSS Media Queries

<div class="simpler-banner-horizontal">
  <simpler-banner appId="YOUR_APP_ID" locale="en" variant="horizontal"></simpler-banner>
</div>
<div class="simpler-banner-vertical">
  <simpler-banner appId="YOUR_APP_ID" locale="en" variant="vertical"></simpler-banner>
</div>

<style>
  /* Default: Show horizontal banner and hide vertical banner */
  .simpler-banner-horizontal {
    display: block;
  }
  .simpler-banner-vertical {
    display: none;
  }

  /* On screens 1250px or smaller, swap banners */
  @media screen and (max-width: 1250px) {
    .simpler-banner-horizontal {
      display: none;
    }
    .simpler-banner-vertical {
      display: block;
    }
  }
</style>

In this example:

Screens wider than 1250px: The horizontal banner is displayed.
Screens 1250px or narrower: The vertical banner is displayed.

Additional Resources

For a live example and more detailed implementation, please check our StackBlitz project.

Key Implementation Guidelines​

Example Usage​

Component Properties​

Placement Guidelines​

Variant - horizontal​

Variant - vertical​

Variant - strip-header​

Variant - strip​

Variant - square​

Handling different shapes​

Example Using CSS Media Queries​

Additional Resources​