Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Adding PWA Capsule 

After you name you your app and dd an icon in Settings.

Select "Branded PWA JS Capsule", marked blue ↓


Go to the admin panel of your web site website and copy/paste the pre-made JS snippet into Header or Footer of your website. It already has everything needed, like you your account and app IDs



Download an archive with 2 JS files - ⇲ here or by pressing the button, shown below. And unzip it. 

...

Check if files are added alright by typing any of 2 following URLs into a browser:

  •  https://yourwebsite.name/PWALessSDKWorker.js 

...

If all is ok, you must see the following line on the screen, for each of the URLs above:

importScripts("https://cdn.mobsted.com/PWALessWorker.js");


Creating "App Saving" Prompts

These prompts are called widgets, you can have as many different saving points per each app as you want. It is recommended to have a specific app saving purpose for each.


For example, it makes send sense to offer saving a shop's app to have quick access to specials, or to save the same app after the order it was made - to track it easier. See examples below:

...

or you can always return to it by going inside the app on the home page (M logo in the top left corner) and pressing Widgets section amber ↓, then by opening Capsule widgets green section ↓.

...

Name this widget, you will use the name, later on, to call it on your website:

...

The description is for internal use only.



You Your first widget will appear :

...

 To call this widget on your website press the blue button ↑ - Call this widget. You will see how to call upon this particular one:

...

Click the Widget's card above anywhere to open it's its set up: 


Enter a link to an image you want to use as a visual explainer of why to save the app into the red block ↓.

Enter text description as to why to save the app into the amber block ↓ .

Note that you can preview how this installation prompt will look on your right → hand side. 



Adding "App Saving" Prompts to your Website


An example - Simple Button.

Show this app saving widget when a user presses a certain button, in this case, "Install App" button.


Code Block
languagejs
titleCode sample
<!-- Custom button anywhere on the page -->
<button onclick="pwaless.showWidget('main')">Install App</button>


You can call this these widgets anyway you see fit, for example, based on user actions (like a button) or using timers and as a part of a workflow, like "Something is added to a shopping cart"


An example - Auto Hiding Button


It is the same button, but it will hide if a user visits your website and already has the application installed.


The only difference with the previous example is an HTML attribute added: <button pwaless onclick ...

Code Block
languagejs
titleCode sample
<!-- Custom button anywhere on the page -->
<button pwaless onclick="pwaless.showWidget('main')">Install App</button>


NOTE - the attribute "pwaless" will work just as well on any other HTML element, as it does on buttons.

Recommended Usage 


It makes sense to keep the "App Saving" abilities of your website visible, so people can share it, in places like the bottom block of your website.


For pop-ups, notification bars, site menus, and logic-related prompts (like saving after a purchase is made) it is recommended to use the Auto Hiding function. 



Final Check List for your website

...