Front End Integration

Types of Web Applications

Development partners are free to use any web framework or technologies to develop their application.

Plugins

A plugin is a way for vendors to describe the requirements of an application so that it can be properly integrated into the Central1 ecosystem.

A plugin consists of two required files:

1. plugin manifest
2. plugin template

Plugin Manifest
The plugin manifest is a JSON file that provides Central 1 with some details about who developed the application, as well as the various configuration points required by the application (eg. a client identifier). View the Community Plugin API Documentation.pdf.

Plugin Template
The plugin template is the HTML required to be put onto a page in order to bootstrap a web application. This can be standard HTML that include a Script tag that loads Javascript from an external system, or CSS styles required for the application or a combination of these items. This plugin template is written in the Handlebars templating language and will be provided the information collected by Central 1. The information provided will include:

• values collected based on the configuration points in the plugin manifest
• reserved data that will be provided by Central 1 (eg. authentication keys, client business name).

View the Community Plugin Development Documentation.pdf for more details.

Types of Plugins

There are three different plugin archetypes:

1. Micro-frontend Plugin
2. iFrame Plugin
3. Redirect Plugin

Micro-frontend Plugin
Micro-frontend Plugin allows a client-side, standalone, web application to be loaded onto the page with and can be seamlessly placed on various Central 1 environments. Simply define the necessary HTML, JavaScript, or CSS needed in the plugin template in order for the application to start:

iFrame Plugin
The characteristics of the iFrame Plugin is that the web application is hosted externally and can be embedded into Central 1’s environments via an <iframe> HTML element. Additional information can be passed to the embedded web application by specifying query parameters in the <iframe> URL.

Redirect Plugin
The Redirect Plugin will redirect the browser to another site. This can allow a user to start their user journey from one of Central 1’s platforms and transfer their session to another site to continue their journey.

Code Ingestion Process

At the minimum, a plugin will need to have:

1. manifest.json
2. start template (HTML or Handlebars) file

Note: A valid vendor ID is required for plugin submissions and will be provided to you by Central 1.

The plugin can be submitted to Central 1 using Git. Once Central 1 has read access to the Git repository containing the plugin, the process is simple:

1. Put all of the required plugin files and place it in the /dist directory.
2. Create a Git tag with the version number at the specific commit containing the plugin files.

Once Central 1 has detected the new Git tag in the repository, the plugin files will be ingested and eventually made available on the pertinent environments.

Standards

The plugin should be functional on the following web browsers:

• Google – Chrome (latest version)
• Mozilla – Firefox (latest version)
• Microsoft – Edge (latest version)
• Apple – Safari 14

The plugin should be web accessible and comply to the WCAG 2.1 level AA standard. See WCAG Quick Reference.

For improved user experience, the plugin should be responsive and support different viewport/device sizes:

• Mobile
• Tablet
• Desktop

Theming

The environments will have a client-branded theme CSS file based on Bootstrap. Simply follow the class names defined by Bootstrap to apply the appropriate client-branded styles to the plugin.