Full integration package

Integrating OpenBadges JavaScript Plugin into Your Website

Overview

This guide will help you integrate the OpenBadges JavaScript plugin into your website. The integration works seamlessly with website builders like Wix, WordPress, and custom HTML sites. The code needed is hosted on a CDN to make it easy to add to your website, simply drag and drop onto your HTML website.

Steps to Integrate the Plugin

1. Get Your Authentication Token and System URL

First, access the API page on the OpenBadges website to get your authentication token and system URL. You can access these by logging into your OpenBadges Issuer account and visiting Issuing Badges > Api. The System URL is the website URL above the API key, and the Auth Token is going to be the string of characters you get when you click the key under Actions on the API Key,

2. Include the JavaScript and CSS Files

Add the following scripts and styles to your website's HTML. For website builders like Wix or WordPress, you can usually add these in the custom HTML/JS section. You need to make sure that that the stylesheets and script links are on the index html page of the website, and then the

<div id="badge-container"></div>

is located on the page that you want to display the badges:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Badge Container</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openbadgesjsplugin@1.1.2/dist/styles.css">
</head>
<body>
<div id="badge-container"></div>

<script src="https://cdn.jsdelivr.net/npm/openbadgesjsplugin@1.1.2/dist/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/openbadgesjsplugin@1.1.2/dist/badges.js"></script>
</body>
</html>

3. Initialize the Badge Container

After including the necessary scripts, you need to initialize the badge container with your specific configuration. Add the following script to your HTML file, replacing the placeholders with your actual values. Add this script onto the page that the badge container is located on at the bottom of the file:

<script>
document.addEventListener('DOMContentLoaded', () => {
const emails = ['user@example.com']; // Replace with actual email(s)
const authToken = 'YOUR_AUTH_TOKEN'; // Replace with your auth token
const systemUrl = 'YOUR_SYSTEM_URL'; // Replace with your system URL
const display = 'card'; // Options: 'card', 'list'
const orderBy = 'dateIssued'; // Options: 'dateIssued', 'dateCreated', 'issuedByName', 'badgeName', 'status'
const searchQuery = ''; // Optional search query
const isAscending = true; // Sort order: true for ascending, false for descending
const buttons = null; // Optional custom buttons

BadgeContainer(emails, authToken, systemUrl, theme, display, orderBy, searchQuery, isAscending, buttons);
});
</script>

4. Customize the Badge Display (Optional)

The BadgeContainer function supports various parameters to customize the display of badges:

  • emails: An array of email addresses whose badges will be displayed.
  • authToken: The authentication token obtained from the OpenBadges API.
  • systemUrl: The system URL provided by OpenBadges.
  • display: The display format, either 'card' or 'list'.
  • orderBy: The parameter to sort badges (e.g., 'dateIssued').
  • searchQuery: An optional query to filter badges.
  • isAscending: Boolean to sort badges in ascending order.
  • buttons: Optional custom button elements for each badge.

Conclusion

By following these steps, you can easily integrate the OpenBadges JavaScript plugin into your website. If you encounter any issues or need further customization, refer to the OpenBadges documentation or contact support.