Adstate Embeddable Solutions

⬅️ Go back

Smart banner component

See demo

This is how you can embed our settings component into your own website:

Native for iOS

iOS has native support for a smart banner. If you use the use-native-for-ios="true" attribute, the regular smart banner will be hidden on iOS, and only the native one will be used. The regular one will still appear on other platforms.

Note that if you supply native-for-ios-app-id and native-for-ios-app-argument without setting use-native-for-ios=true, both the regular and native will show. This is because we support showing the regular banner in other locations (it doesn't have to be fixed to the top of the page like the native one).

Example usage:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Our website</title>
  </head>
  <body>
      <nav>
          <img src="logo.jpg" alt="">
          <ul>
              <li><a href="#1">Link 1</a></li>
              <li><a href="#2">Link 2</a></li>
              <li><a href="#3">Link 3</a></li>
          </ul>
      </nav>
      <main>
        <adstate-smart-banner
            title="Last ned Minnesider appen!"
            extra-text="Last ned appen for å få tilgang til alle funksjonene."
            show-close-button="true"
            link-text="Last ned"
            description="Få den beste opplevelsen med appen."
            link="https://minnesider.no/app"
            rating="5"
            logo="https://design.adstate.com/assets/minnesider-branding/logo/app-icon.svg"
            show-only-on="mobile">
            use-native-for-ios="true"
            native-for-ios-app-id="1529239925"
            native-for-ios-app-argument="admemoria"
        </adstate-smart-banner>
      </main>
      <footer>
          <p>Page footer © Copyright 2023</p>
      </footer>
      <script src="https://embed.adstate.com/smart-banner-component.js"></script>
  </body>
  </html>

You might also need some CSS, if you want the banner to remain at the top of the page.
Wrap the smart banner with a div with id smart-banner-wrapper.
Then add the following CSS: 

#smart-banner-wrapper {
  position: sticky;
  top: 0;
  z-index: 1;
}