Overview

This document describes how to integrate Optimise AppButton in your Website. The following details how to integrate the SDK, add a placement and display a button on your pages.

Prerequisites

  1. You must have an understanding of developing with HTML, CSS & JavaScript
  2. To use location-based AppButtons your website must use HTTPS/SSL for all connections, including other elements on the page (such as images). Safari on iOS and Chrome 50 & above requires this – read more.

Adding the SDK to your Page

Inclusion in a web page requires a JavaScript tag and CSS link tag, as well as providing divs to fill with Placements.

<script src="https://buttonsdk.omguk.com/optimise.appbutton.websdk.min.js"></script>
 <link rel="stylesheet" href="https://buttonsdk.omguk.com/optimise.appbutton.websdk.min.css" />

HTML divs are used to create placements, and attributes are used to configure the tag’s behaviour.

    <div "optimise-placement"></div>

AppButton supports 2 types of Placements:

Location-based Placements

A location-based placement may look like this:

    <div
        class="optimise-placement"
        data-optimise-placementid="1"
        data-optimise-request-location="true"
        data-optimise-target-location="77.1:28.5562"
    ></div>

Keyword-based Placements

A keyword-based placement may look like this:

    <div
        class="optimise-placement"
        data-optimise-placementid="8"
        data-optimise-keywords="iphone,mobile"
    ></div>

Parameters

data-optimise-placementid
Required|Integer

Matches the tag up with a placement ID e.g. “4”

data-optimise-request-location
Optional|Boolean

Whether to request the user’s location e.g. “true”

data-optimise-target-location
Optional|Special

Longitide and latitude of this placement’s target separated by a ‘:’ e.g. “77.1:28.5562″

data-optimise-keywords
Optional|CSV

A list of keywords relevant to the placement e.g. “iphone,mobile”

Methods

JavaScript

Optimise.AppButtonInit(mobileAppId)
mobileAppId – Required|String: App ID for which placements are configured

Initialises all placements.

Optimise.AppButtonRefresh()
Re-creates placements. This is helpful if placement attributes have changed.

Full Example

<html>
<head>
<link rel="stylesheet" href="https://buttonsdk.omguk.com/optimise.appbutton.websdk.min.css" />
</head>
<body>
<h1>Location-based placement</h1>
<div
class="optimise-placement"
data-optimise-placementid="1"
data-optimise-request-location="true"
data-optimise-target-location="77.1:28.5562"
></div>
<h1>Keyword-based Placement</h1>
<div
class="optimise-placement"
data-optimise-placementid="8"
data-optimise-keywords="iphone,mobile"
></div>
<script src="https://buttonsdk.omguk.com/optimise.appbutton.websdk.min.js"></script>
<script>
Optimise.AppButtonInit('XXXX-XXXX-XXXX-XXXX-XXXX');
</script>
</body>
</html>