HTML Markup

To create a subscription for a notification channel you need to fetch our API endpoint subscribe token and display to your clients the QR code. Then they can subscribe to the notification channel using our mobile app and through them receive the notifications.

If you like to show the subscription code using HTML markup, we provide you with a simple HTML markup to display the QR Code. Feel free to change it as you like.

We recommend creating a Subscribe Notifications button to avoid making unnecessary calls. Only when your customer clicks the button should you make the request to display the QR Code.

The subscribe code endpoint also returns you the plain subscription code and the deep link (universal link) which is the same code present in the QR Code. Our mobile app also supports new subscriptions by pasting that code on it, which means that if you prefer you can find other ways to supply that code to your clients.

HTML and CSS

<!--
  retrieve the "image" and "appUrl" values from the response of the 'subscription token' endpoint.
  -->

<div class="bnotify-widget">
  <img src="{image}"/>
  <!-- optional -->
  <ol>
    <li><a href="{appUrl}">Download</a> the APP</li>
    <li>Scan the code</li>
    <li>Receive notifications</li>
  </ol>
  <!-- /optional -->
</div>

<style>
  .bnotify-widget {
    align-items: center;
    background-color: #49de80;
    border-radius: 5px;
    display: inline-flex;
    padding: 8px;
  }
  .bnotify-widget > ol {
    color: #333333;
    list-style-type: decimal;
    padding-left: 30px;
  },
</style>

HTML Markup

HTML and CSS

Bnotify widget preview