Getting started

You should read this entire page before you start coding for starti.app

Installing the package

  • The package is loaded from a CDN. Contact starti.app, to get your package loaded on the CDN. Then you can add the following script tag to your head tag:

    <script src="https://cdn.starti.app/c/{YOUR_BRAND}/main.js"></script> 
<link rel="stylesheet" href="https://cdn.starti.app/c/{YOUR_BRAND}/main.css" />

  • (Optional) If you use TypeScript, add the following package to include the types using npm:

    npm install --save-dev starti.app

Note:

  • Replace {YOUR_BRAND} with the brand name you have been assigned.

Using the referenced API

The entire functionality is contained within a class called startiapp. When using an editor with auto-complete functionality, all available options will appear when typing a period (.) after startiapp, making the development process more efficient.

Modules

The app has a list of modules which serves different purposes. For example there are modules for handling push notifications on the device.

Methods on the respective modules can be called directly on the modules using dot annotation.

The package includes methods for all modules, even if only a subset of those modules are available in the specific app being developed.

Example

Here you’ll find a short example of how to get started using push notifications inside your website.


<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="https://cdn.starti.app/c/{YOUR_BRAND}/main.js"></script> <!--  Replace {YOUR_BRAND} with your brand name -->
    <link rel="stylesheet" href="https://cdn.starti.app/c/{YOUR_BRAND}/main.css" />

    <style>
      body {
        margin-top: var(--startiapp-inset-top, 0px);
      }
    </style>
</head>

<body>
    <div class="startiapp-show-in-app" style="color: green">
        Loaded in starti.app version <span id="appVersion"></span>
    </div>
    <div class="startiapp-show-in-browser" style="color: red">
        NOT loaded in starti.app
    </div>

    <button onclick="location.reload()">Reload</button>

    <button onclick="initializePushNotifications()">
        Initialize push notifications
    </button>

    <button onclick="getPushToken()">
        Get the token
    </button>

    <button onclick="resetUrl()">
        Reset startup URL
    </button>

    <script type="text/javascript">

        // We should always listen for a call to appIntegrationsAreReady.
        // When this function is called we know we are running inside the
        // app.
        startiapp.addEventListener(
            'ready',
            async function () {
                // Tell the app we are ready to receive events
                startiapp.initialize();

                // Get the app version
                document.getElementById('appVersion').innerText =
                    await startiapp.App.version();
            }
        );

        async function initializePushNotifications() {
            // A system pop-up will appear the first time this is
            // called on an iPhone
            alert('Permission granted: ' +
              await startiapp.PushNotification.requestAccess());
        }

        async function getPushToken() {
            // Manually ask for the current token
            alert(await startiapp.PushNotification.getToken());
        }

        function resetUrl() {
          // After calling this function, the app will start at the
          // initially configured URL once restarted
          startiapp.App.resetAppUrl();
        }

    </script>
</body>

</html>
Events →