Custom subscription skin example

You can set custom skin to subscription prompt using skinSource option of subscription tag:

sdk.startInstall({
    appId: "YOUR-APP-ID-HERE",
    skinSource: window.location.origin + "/static/notix-skin.html"
})

This option defines the path to the HTML file containing the layout of the subscription window

All CSS and JS logic must be defined in this file in some sections.

Note: you can download a Notix brand tag as example to research

Also you can determine some iframe options using iframeCustomConfig different from desktop and mobile:

sdk.startInstall({
    ...
    iframeCustomConfig: {
        desktop: { height: 'auto', width: 'auto', left: '1rem', top: '1rem' },
        mobile: {
            height: '100%',
            width: 'auto',
            backgroundColor: 'rgba(0,0,0,0.5)'
        }
    }
    ...
})

Step to install

• Place sw.enot.js in the root of your site
• Add the Custom skin to the folder usually used for storing static files, e.x. static. Note: you must use this constants in HTML layout to auto-substitution of values:
  • {notificationHeading} for the title
  • {notificationTextMobile} for text on mobile devices
  • {notificationText} for text to desktop
  • {denyBtn} for deny button
  • {allowBtn} for allow button
• In the Tag determine path to the Custom skin using option skinSource. It may be as a full path e.x. https://example.com/static/custom-skin.html, or a relative path as in the example above
• Optional: set a custom iframe config using iframeCustomConfig as in the example above. This option can be set only for this CSS properties:
  • width
  • height
  • top
  • bottom
  • left
  • right
  • maxWidth
  • transform
  • backgroundColor
• The full configuration of this can be as:

  const s = document.createElement("script")
  s.src = "https://notix.io/ent/current/enot.min.js"
  s.onload = (sdk) => {
      sdk.startInstall({
          appId: "YOUR-APP-ID-HERE",
          step0: "usePrerequest",
          delay: 1,
          skinName: "default",
          skinSource: "/static/notix-skin-bg.html",
          iframeCustomConfig: {
              desktop: {height: 'auto', width: 'auto', left: '40%', top: '0'},
              mobile: {
                  height: '100%',
                  width: 'auto',
                  backgroundColor: 'rgba(0,0,0,0.5)'
              }}})
          }
  document.head.append(s)