OpenWidget Apps

Introduction

What are Apps?

OpenWidget Apps is a place dedicated to external developers trying to solve problems and fulfil the needs of end-users looking for immediate information or help. With it, website visitors interacting with OpenWidget get a dedicated card displayed on top of the OpenWidget's Home Screen – a card containing the custom information that you'd like to display and a button that opens a full-screen view where you can embed your application as an iframe, or open a new tab in the visitor's web browser.

Think of it as a place where website visitors can check the current status of their delivery, set up a call with one of the company's representatives via an app like Calendly or check the status of a company's service. All of that available at a glance, without the need to contact anyone beforehand or look for information buried deep somewhere on a website.

How does it work?

As mentioned above, OpenWidget is a custom card added on top of the OpenWidget's Home Screen. It consists of three main elements:

Your application's icon, together with a header.
A text that you'd like to display below the header in the form of a string.
A button* that will display custom text in the form of a string and perform a specific action*.

*The button itself can perform one of the following actions:

Within OpenWidget, open a full-screen view where your App will be embeded as an iframe.
Or open a new tab in your customer's browser that will lead to the external URL.

Once the app is ready and published, it can be installed by people configuring their OpenWidget directly from the Apps Gallery available within the OpenWidget Management App. Once installed, your App will be visible on top of the OpenWidget's Home Screen and will then be available for website visitors to interact with.

So, how do you create your own App and publish it on OpenWidget's App Market?

Create your own App

Where to begin

Let's start with an idea. It may sound like a cliche, but your App should solve at least one of your end-user's problems. For example, allow them to check their delivery status or set up a sales call with one of your representatives without needing to contact anyone beforehand.

Now that your idea is ready, you can start developing an app and integrate it with OpenWidget. But first things first.

Prepare App's shape

App's shape is described in a JSON format and consists of the following elements:

name - the name of your App that will be displayed in the App Gallery and on a card added to OpenWidget's Home Screen. Max characters count: 50.
description - the description of your App that will be displayed in the App Gallery. Max characters count: 250.
text - the text that will be displayed on a card attached to your OpenWidget's Home Screen. Max characters count: 250.
icon - the icon that will be displayed in the App Gallery and on a card added to OpenWidget's Home Screen.
action - this property is an object defining the attributes of a button added to the card:
- label - the CTA text displayed on a button. Max characters count: 24.
- value - the URL that should be opened after clicking on a button, either as a full-screen view where your app will be embeded as an iframe or by opening it in a new tab.
- type - type of the button determining whether the URL will be opened in a new tab or as a full-screen app.
properties - this is the object that contains dynamic values used as a part of the URL of your Open Widget App. They allow your app users to set up detailed information that will be visible later. Property configuration is available for the customer in the Open Widget app, in the section of your App. For example, you may want to ask your customers to provide you with the ID of their calendar so that you can generate the specific instance of the calendar in your App. The object consists of:
- key - a name of your customer property. As the value of this key, you should provide the description of the of the property (you can check the example below).
externalurl - the URL that will be attached to your app's description in App Gallery, for example forwarding to external page with more details about your app. Note that this property is optional.

Now that you know what elements your App should consist of, you must prepare a JSON file that will include the above elements. Here's an example of the JSON file that you'll need to submit:

{
  "name": "string",
  "descritpion": "string",
  "text": "string",
  "action": {
    "label": "string",
    "value": "url",
    "type": "button"
  },
  "properties": {
    "key": "value"
  },
  "externalurl": "url"
}

This shape should be available as a file added to a repository that our team can access. To get a detailed description of the submission process, check out the Submit Your App section available below.

Submit Your App

To get your app published in the App Gallery, you must send your request with the attachments described below to [email protected]. Your registration must contain App's details and App's repository:

App's details

App name: choose a name that represents your app or your company. It should be short and customers should know what the app is doing after reading it. It must be less than 100 characters. For example: Order Status, Meeting Scheduler or Status Page Information.

Description: share a short explanation of what your app is doing or how it helps the customers on the website. Make sure that the description is less than 250 characters. For example: See your order status immediately after opening the widget on our website.

App’s repository

Attach a link to your app repository and ensure it has the proper access for our team to read it. The repository must contain the file with the app in a JSON format, for example app.json that will contain the following structure:

{
  "name": "Set up a call",
  "descritpion": "App allowing customers to set up a call with a sales representative.",
  "text": "Set up a call with our sales rep",
  "action": {
    "label": "Set up a call",
    "value": "https://calendly.com/%calendarPath%",
    "type": "button"
  },
  "properties": {
    "calendarPath": "Your calendar path"
  },
  "externalurl": "https://your-landing-page.com"
}