interface.html

<div id="container" data-asset="{{asset ''}}">
  <div id="notifications-container"></div>
  <div id="settings">
    <p class="text-right"><a href="#" class="btn btn-default exit-settings">Back</a></p>
    <h4 class="custom-h4">Instructions</h4>
    <p>Push notifications require a user to subscribe. In order to subscribe a user to push notifications please configure the following settings. After updating these settings you will need to publish your app.</p>
    <p><strong>Note:</strong> You cannot use or test this feature in Fliplet Viewer. It will only work in live apps with the relevant operating system push notification settings configured. Push does not work on web apps.</p>
    <h4 class="custom-h4">Push request interface</h4>
    <p>Configure the settings for the notification interface that will ask the user if they want to enable push notifications.</p>
    <form id="configuration" style="overflow:hidden">
      <div class="row">
        <div class="form-group clearfix">
          <div class="col-sm-12 control-label">
            <label for="popup_title">Permission popup title</label>
          </div>
          <div class="col-sm-12">
            <input type="text" name="popup_title" class="form-control" id="popup_title" placeholder="Enter a title" value="{{#if popupTitle}}{{popupTitle}}{{else}}App updates and notifications{{/if}}" />
            <p class="help-block">The popup will only appear once for users that allow or reject push notifications.</p>
          </div>
        </div>
        <div class="form-group clearfix">
          <div class="col-sm-12 control-label">
            <label for="popup_message">Permission popup message</label>
          </div>
          <div class="col-sm-12">
            <textarea class="form-control" name="popup_message" id="popup_message" rows="4" placeholder="Enter a message">{{#if popupMessage}}{{popupMessage}}{{else}}Tap "Allow notifications" below to be notified of app updates.{{/if}}</textarea>
          </div>
        </div>
        <div class="form-group clearfix">
          <div class="col-sm-12 control-label">
            <label for="auto-popup">Do you want to show the push notification permission popup automatically on the first screen of the app?</label>
          </div>
          <div class="col-sm-12">
            <div class="checkbox checkbox-icon">
              <input type="checkbox" id="auto-popup" name="showAutomatically" value="1" {{#if showAutomatically}}checked{{/if}} />
              <label for="auto-popup">
                <span class="check"><i class="fa fa-check"></i></span> Show notification popup automatically
              </label>
              <p class="help-block">If you want to manually show the popup on a specific screen, please disable this option and copy the snippet of code below and paste it on the screen's JavaScript code editor, using the <a href="#" onclick="Fliplet.Studio.emit('navigate', { name: 'appEditDeveloper' })">Developer Options</a>.</p>
            </div>
            <pre><code>var pushWidget = Fliplet.Widget.get('PushNotifications');

pushWidget.ask().then(function (subscriptionId) {
// user pressed allow and has been registered
}).catch(function (err) {
// contains code and message
});</code></pre>
          </div>
        </div>

        <div class="form-group clearfix">
          <div class="col-sm-12">
            <div class="checkbox checkbox-icon">
              <input type="checkbox" id="portal-popup" name="showOnceOnPortal" value="1" {{#if showOnceOnPortal}}checked{{/if}} />
              <label for="portal-popup">
                <span class="check"><i class="fa fa-check"></i></span> Apps inside a portal shouldn't request users to subscribe to push notifications.
              </label>
            </div>
          </div>
        </div>
        <div class="form-group clearfix">
          <div class="col-sm-12">
            <p><button type="submit" class="btn btn-primary">Save</button> <button class="btn btn-default exit-settings">Back</button></p>
          </div>
        </div>
      </div>
    </form>
    <div class="settings-saved-app-msg fade-transition" style="display: none;">
      Configuration saved.
    </div>
  </div>
</div>