Beam API Format

The format of Beacon Beams

ℹ️ Format

You can create your Beams in any language you'd like such as: PHP or JS, however, it must be capable of exposing an API endpoint accessible via the web. You could use a service such as ngrok to temporarily expose your API, or use Github Pages to host a static API.

{
  "success": "1",
  "css": "<style></style>",
  "js": "<script></script>",
  "notification": "000-111-222",
  "lenders": [
    {
      "name": "Welcome",
      "names": "<div></div>"
    }
  ]
}

🔑 Definition of keys

success

• type: String
• required: yes

The success key is used to determine whether there are any pages available in your pages Array, this should return either 0 or 1 based on the availability of the pages.

Example

"success": "1"  // '0' or '1'

css

• type: String
• required: yes

The css key is used to style your Beam, this styling will be used for all of your Beam pages, you should keep this styling specific and not use generic CSS classes such as .text-white or .primary, it's advised to prefix CSS classes first.

Example

"css": "<style>.beam__my-wrapper{background-color:#f2f2f2}</style>"

notification

• type: String
• required: yes

The notification key is used within the native Android notifications & the My Beams screen, this should be limited to no more than 30 characters and cannot contain any markup. This key can be dynamically updated via your server to display real-time information at a glance within the Beaocn app.

Example

"notification": "Sales: 500 | Profit: £1,000"

lenders will become deprecated in favour of: 'pages'

• type: Array
• required: yes

The lenders array should contain Objects (each Object represents a sub-page within your Beam), your Objects may contain a value for the name key, and the contents of your Beam inside the names key as HTML markup (excluding JS & CSS)

Example

"lenders": [
  {
    "name": "Overview",  // used as a menu name in the navigation of Beacon.
    "names": "<div>Display some summary information about your business</div>"  // the main content of your Beam.
  },
  {
    "name": "Sales",
    "names": "<div>Display sales summary</div>"
  }
]