Adstate Embeddable Solutions

⬅️ Go back

Smart banner component

See demo

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

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="4"
            logo="https://design.adstate.com/assets/minnesider-branding/logo/app-icon.svg"
            show-only-on="mobile">
        </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;
}