GETTING_STARTED_VENDOR.md

Vendor customization guide

As a vendor the first thing required is to host a URL that returns JSON with the following structure and provide the link to the customers.

In this example we have a JSON hosted at following link:

Hosted JSON Link: https://www.npoint.io/docs/d59bd3ab0b31de863a20

API To fetch JSON: https://api.npoint.io/d59bd3ab0b31de863a20

Vendor would provide the API link to their customers.

Following is the JSON structure

{
  "title": "Provenant",
  "logo": "https://media.licdn.com/dms/image/C4E0BAQG2_zXeSh-Qdw/company-logo_200_200/0/1663180132032/provenant_inc_logo?e=1715212800&v=beta&t=yINW7CaXVG50h3Ay7vu13OpY4mAu30qpijZwJAe5g-I",
  "icon":"https://cdn-icons-png.flaticon.com/128/3291/3291695.png",
  "onboardingUrl": "https://github.com/signup",
  "docsUrl": "https://docs.github.com",
  "supportUrl": "https://support.github.com",
  "theme": {
    "colors": {
      "primary": "#004DB5",
      "secondary": "#F0F6FF",
      "error": "#ec576d",
      "heading": "#004DB5",
      "text": "#333333",
      "subtext": "#004DB5",
      "white": "#ffffff",
      "black": "#373e49",
      "bodyBg": "#FBFBFB",
      "bodyBorder": "#004DB5",
      "bodyColor": "#004DB5",
      "cardColor": "#004DB5",
      "cardBg": "#E4F3FE"
    }
  }
}

title

This attribute is used to indicate the vendor name.

logo

This attribute is used to indicate the vendor icon.

title and logo are shown at:

• sign in

• top of the sidebar

• heading of content script dialog

icon

This attribute is used to set the icon provided by the vendor as extension icon.

onboardingUrl

Hyperlink asociated to the text "Don't have a KERIA agent?"

docsUrl

Hyperlink asociated to the text "docs"

supportUrl

Hyperlink asociated to the text "support"

theme

this attribute is the essence of colors (and others e.g. spacing, fonts, etc in the FUTURE) customization. To keep it simplistic, the colors are designed to work in a two-tone fashion.

• bodyBg and bodyColor have been used for base colors of screens e.g. sign in, sidebar, and content-script dialog. These should be contrasting and complimenting as these are used for background and text respectively.
• primary is primarily used for buttons
• secondary is used as a contrasting color to make it distinct from bodyBg. It is used for the listings and modal background.
• cardColor and cardBg are used for the list items e.g. identifier card or credential card.
• heading, text, and subtext have been used for label and value pairs on each listing item.

JSON Theme Annotation

Sign in

Main View

Content Script Dialog

To compare some examples of different vendor JSON customizations, see these links below:

• https://www.npoint.io/docs/1d388b8942c4ec3ed763
• https://www.npoint.io/docs/a75a0383d2820a2153c1
• https://www.npoint.io/docs/d59bd3ab0b31de863a20

You can click the 'bin' link at the bottom of those pages to see the raw JSON