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"
}
}
}
This attribute is used to indicate the vendor name.
This attribute is used to indicate the vendor icon.
title and logo are shown at:
- sign in
![Screenshot 2024-02-08 at 4 07 21 AM](https://private-user-images.githubusercontent.com/19255438/303163036-1c310970-6011-48db-98af-f78f4267f4b1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwNTczNjAsIm5iZiI6MTcyNTA1NzA2MCwicGF0aCI6Ii8xOTI1NTQzOC8zMDMxNjMwMzYtMWMzMTA5NzAtNjAxMS00OGRiLTk4YWYtZjc4ZjQyNjdmNGIxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDIyMzEwMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTEzNGIwNjZmMTliNzhlNDg0ODgxZjQyYTQ0ODcyNWJkYmVkZTg1ZTFkNDkyYjJmYTU0NzAyMTZjNDlkM2RjZmImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.W94vHf4bjtnIAXQbROQg50IXxLMt6LKNGqMPnTz0YUU)
- top of the sidebar
![Screenshot 2024-02-08 at 4 07 47 AM](https://private-user-images.githubusercontent.com/19255438/303163648-97cb45b8-c476-4e8d-a7e3-c3007db9179d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwNTczNjAsIm5iZiI6MTcyNTA1NzA2MCwicGF0aCI6Ii8xOTI1NTQzOC8zMDMxNjM2NDgtOTdjYjQ1YjgtYzQ3Ni00ZThkLWE3ZTMtYzMwMDdkYjkxNzlkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDIyMzEwMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTVjZjcwNzljZTc3ZGRkMGIxMzZmZjM1ZjVmNDBkZDk4MTkyNWUyNzFiYTVhNDkzN2JkODJlYWZhYTQ2NzQ2NTYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.QQjFATvWjQAbf_5MQq-WCv11_84DHqq7pANIn1iT3ts)
- heading of content script dialog
![Screenshot 2024-02-08 at 4 08 08 AM](https://private-user-images.githubusercontent.com/19255438/303163743-4e491afe-3459-4380-8968-0a5ebdfcc988.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwNTczNjAsIm5iZiI6MTcyNTA1NzA2MCwicGF0aCI6Ii8xOTI1NTQzOC8zMDMxNjM3NDMtNGU0OTFhZmUtMzQ1OS00MzgwLTg5NjgtMGE1ZWJkZmNjOTg4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDIyMzEwMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWY2MmMxOWEyNTJiMzAzMzg0ZTc5OWY1NDRmZWVhNzVmMGQzNjQzMGYyNGM5ZDlkZjhiMDMxNTJhNDc3NGQyODImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.I1WyYHjSWPY_Y3LObXaxk8rCDb23GKxJMqM5P7OWuBQ)
This attribute is used to set the icon provided by the vendor as extension icon.
Hyperlink asociated to the text "Don't have a KERIA agent?"
Hyperlink asociated to the text "docs"
Hyperlink asociated to the text "support"
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.
![Screenshot 2024-02-08 at 3 23 15 AM](https://private-user-images.githubusercontent.com/19255438/303167045-b4cec3a0-87c1-4289-aab9-ef31f30f0338.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwNTczNjAsIm5iZiI6MTcyNTA1NzA2MCwicGF0aCI6Ii8xOTI1NTQzOC8zMDMxNjcwNDUtYjRjZWMzYTAtODdjMS00Mjg5LWFhYjktZWYzMWYzMGYwMzM4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDIyMzEwMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThkMmVlYjdlM2MxYmJhODk0ODRiZmIzOTg0YzY5NGM4YTU2MzNmZWE4YzhkMDBiNmUzOTg3YWQ3MDI3NzhiNWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.qXr1On2wk9mbOaH3qswZGQDErJ_25lYVK1Z1BNSTU2Y)
![Screenshot 2024-02-08 at 3 23 54 AM](https://private-user-images.githubusercontent.com/19255438/303167178-85fd434e-aad2-4330-b3f6-b6ddaaf0b9a8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwNTczNjAsIm5iZiI6MTcyNTA1NzA2MCwicGF0aCI6Ii8xOTI1NTQzOC8zMDMxNjcxNzgtODVmZDQzNGUtYWFkMi00MzMwLWIzZjYtYjZkZGFhZjBiOWE4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDIyMzEwMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWFjYzI0ZmY1NDFkMGI1YWU2YmQ0YTEzYmM5MDY4YWQzNzA4NzliOWRjNGMwNWY3MTFlMDA0MzhmNDE3OWM0MjcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.5J2jy-FS3lYRbYRi1a0925K5X-JUb3oFO-DruLQIwqk)
![Screenshot 2024-02-08 at 3 24 39 AM](https://private-user-images.githubusercontent.com/19255438/303167252-a2ca3782-19de-47ae-92b1-05f07cdf9afd.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUwNTczNjAsIm5iZiI6MTcyNTA1NzA2MCwicGF0aCI6Ii8xOTI1NTQzOC8zMDMxNjcyNTItYTJjYTM3ODItMTlkZS00N2FlLTkyYjEtMDVmMDdjZGY5YWZkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MzAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODMwVDIyMzEwMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWUzZGFmYmI2NzczZDBiNTg1YWY1MmEyZWQ1NTI0ZWM5Y2YyZTgxYzA2ZmQ2MDM4OTkzYWVkODE4ZDhiZmQ5ZmImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.6ypvzGiQXsYHJTdN0KR8uzIrdpxV0UjjG3Vmdv7voXk)
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