@clmeida/vss-app-modal v1.5.0

VSS - Download Modal

Sample of Download the App modal component.

Vanilla JS only.

Getting started

Installation:

npm i @clmeida/vss-app-modal

Analytics

This project works with a global gtag through the browser window object. If it exists, it's going to get the element's params and send the events such as:

<button type="button"
        analyticsName="eventName"
        analyticsScreenName="Home"
        analyticsComponent="button"
        analyticsDescription="custom-description"
        [analyticsExtras]='{ "popup_title": "download", "popup_option": "fechar" }'>
  Hello world
</button>

Assets

Copy and paste the demo/assets folder to your assets folder.

Usage

Import one or more functions from the package:

import { insertModalContent, insertBarContent } from '@clmeida/vss-app-modal';

Or simply import the package and access the methods through the window:

import '@clmeida/vss-app-modal';

// optional if you would like to send analytics events through global `window.gtag` function.
const params = {
  analytics_app_name: '',
  version_web: '0.0.0',
  analytics: {
    apiKey: '',
    authDomain: '',
    projectId: '',
    storageBucket: '',
    messagingSenderId: '',
    appId: '',
    measurementId: ''
  }
};

window.insertModalContent(params);

Note: Through the window object only the insertModalContent method is available, as when the modal is closed it calls the insertBarContent right away.

CDN

<script src="https://unpkg.com/@clmeida/vss-app-modal@1.1.0/index.js"
        onload="show()"
        type="module"></script>

<script>
  function show() {
    window.insertModalContent(env, options);
  }
</script>

Options

You may pass custom options to the modal, such as Title and stores' URLs, ex.:

window.insertModalContent(ENV, {
  title: '<span>Baixe o App</span> My App:',
  appstore: '<my-custom-appstore-url>',
  playstore: '<my-custom-playstore-url>',
  path: '/assets/imgs/'
});

Available options