Skip to content

Latest commit

 

History

History
196 lines (143 loc) · 5.67 KB

ZERO_BADGE.md

File metadata and controls

196 lines (143 loc) · 5.67 KB

Zero Badge

The Zero Badge is a way for organizations that are part of the Public Spaces coalition to show their affiliation on their website. It provides visible evidence to the user that the organization has the intention to implement the Public Spaces values in their online presence.

Get Involved

1. Make sure that your organization meets the criteria for Zero Badge

During this phase of development, it is only possible for the founding partners of Public Spaces to apply for the Zero Badge.

In a later phase, we will open this project up to other organizations.

If you're organization that is interested in joining the Public Spaces coalition, please contact us: [email protected].

2. Register Organization

When you have embedded the badge in your webpage, you are ready to register the organization.

You can call the api directly, or you can use our graphql playground. Here you can also find documentation on our graphql schema.

Example Request

curl -X POST 'https://api.publicbadges.com/pilot/graphql'
  -H "Content-Type: application/json"
  -d '{
    "query": "...",
    "variables": "..."
  }'

where query is:

mutation Register($input: OrganizationInput!){
  registerOrganization(input: $input) {
    domainName
    organizationId
    status
  }
}

and the variables are:

{
  "input": {
    "name": "offcourse",
    "domainName": "https://offcourse.io",
    "contact": {
      "name": "yeehaa",
      "email": "[email protected]"
    },
    "admin": {
      "name": "yeehaa",
      "email": "[email protected]"
    }
  }
}

Example Response

{
  "organizationId": "e79a6c18-787e-4868-8e65-e6a4530fb419",
  "status": "PENDING"
}

An example of a complete curl request can be found here: ./sample-requests/register-organization.sh

3. Apply for the Zero Badge

When you have embedded the badge in your webpage, you are ready to apply for the zero-badge.

You can call the api directly, or you can use our graphql playground

Example Request

curl -X POST 'https://api.publicbadges.com/pilot/graphql'
  -H "Content-Type: application/json"
  -d '{
    "query": "...",
    "variables": "..."
  }'

where query is:

mutation($input: PublicBadgeInput!){
  applyForBadge(input: $input){
    badgeId
    status
  }
}

and the variables are:

{
  "input": {
    "valueCaseId": "88c7a930-3181-11ea-9858-b312ce22102d",
    "domainName": "https://offcourse.io/"
  }
}

Example Response

{
  "badgeId": "e79a6c18-787e-4868-8e65-e6a4530fb419",
  "status": "PENDING"
}

An example of a complete curl request can be found here: ./sample-requests/apply-for-badge.sh

4. Embed the Public Badges Drawer into your webpage

In order to acquire the Zero Badge, you have to include the Public Badges Drawer webcomponent on your organization's website.

You can download it from npm:

npm install @offcourse/public-badges-drawer
yarn add @offcourse/public-badges-drawer
import publicbadges-drawer from "@offcourse/public-badges-drawer"

or host it directly:

<script src="https://unpkg.com/@offcourse/[email protected]/dist/publicbadges/publicbadges.js"></script>

The Public Spaces Badges drawer is a webcomponent that you can use directly in your html.

<publicbadges-drawer />

To configure the badges drawer the following (optional) html attributes are available:

attribute values default description
badge-color hex color code "#3C3C3C" Sets the color of the badges drawer. Make sure it has enough contrast with the backbround color
modal-theme "dark", "light" "light" Sets the color scheme of the modal (that appears when the drawer is clicked).
language "EN", "NL" "EN" Sets the language of the badges drawer
test-mode "true", "false" "false" Puts the badge drawer in test mode, handy for testing the positioning within the website.
test-domain string "https://example.org" Domain name used when in test mode 
<publicbadges-drawer badge-color="#FFFFFF" modal-theme="dark" language="NL" test-mode="true" test-domain="https://yourdomain.org" />

Documentation for the use of webcomponents with your frontend framework of choice, can be found here: https://stenciljs.com/docs/overview.

5. Wait for Acceptance

Upon submission of your application, we will check if your organization meets the requirements to get the zero badge. The two main criteria are:

  • Your organization is a member of the public spaces coalition.
  • Your organization has included the Public Spaces Badge Container on their website.

The exact scenarios that the we test can be found here: Zero Badge Feature

As soon as your organization is verified and the badge is issued, it will appear in automatically your badge container. You can also download the open badge artifact manually through the link provided.