1. Help Center
  2. Issuers
  3. Embed Accredible Tools

Embedded Certificate Designer

Include Accredible's certificate design tool within your own platform to give your users the ability to create and edit their own certificate designs.

As an OEM provider or reseller of digital certificates it's easy to embed our design tool within your own platform. In this guide we'll walkthrough the workflow for including the tool inside your platform and its usage.

To embed the designer you'll need to consume our API via a back-end server and consume this response within your front-end.

Workflow

The embedded certificate designer workflow is:

  1. Token exchange.
  2. Instantiate iFrame.
  3. User interaction.
  4. Capture output.

Token Exchange

The first step is to make an API request to get an authentication token for use with the certificate designer.

https://accrediblecredentialapi.docs.apiary.io/#reference/designs/certificate-designer/initialize-embedded-certificate-designer

In this request you may include a design ID if you'd like to edit an existing design, omitting it will result in a new design. You may also include a department ID if you'd like the design to reside within a particular department (if you have multiple departments setup).

Once you've made the request you'll receive a response like this:

{
"token": "abc123:xyz456",
"design_id": 12345
}

Once instantiated, a token is valid for 4 hours unless in use or re-instantiated.

Instantiate iFrame

The certificate designer can now be embedded within your platform. 

<iframe src="https://embed.certificates.design/?issuer_token={TOKEN}&id={DESIGN_ID}

Replace the variables as indicated in this example to build a url for creating a certificate design that appears as so:

<iframe src="https://embed.certificates.design/?issuer_token=abc123:xyz456

And for editing a certificate design as so:

<iframe src="https://embed.certificates.design/?issuer_token=abc123:xyz456&id=12345

We recommend instantiating the iFrame using Javascript to easily make the certificate designer full screen and so that you can show and hide it as required.

User Interaction

Once the iFrame has been instantiated and is shown the end user can work within the designer to create or edit their certificate design.

Screenshot 2019-09-25 at 09.57.09

Capture Output

Once the user clicks 'Save' then the iFrame will dispatch a MessageEvent using the window.postMessage JavaScript API on the parent element of the iFrame (your page window).

This JSON message contains the following properties:

  • id - The ID of the design that has been created or updated.
  • rasterized_content_url - A link to generate an image of the design.
  • encoded_content - A string representing the content of the design. This may be stored and used to instantiate or edit designs via the API at a future time.

To consume this data you need to implement a listener that intercepts messages from the domain https://embed.certificates.design. This listener can then be used to capture the certificate design data for use within your platform.

Here's an example listener:

window.addEventListener('message', function(e) {
if (e.origin === "https://embed.certificates.design" && typeof (data = e.data) === 'object') {
console.log('Completed:', data.completed);
console.log('Status:', data.status);
console.log('Id:', data.design.id);
console.log('Rasterized Content Url:', data.design.rasterized_content_url);
console.log('Encoded Content:', data.design.encoded_content);
}
});

Example

Accredible has prepared an example JSFiddle with HTML and Javascript to get you started. Simply visit the link below and enter the response information from the token exchange in Step 1.

https://jsfiddle.net/accredible/dfcnt52g/ 

Alternatively, you can find the example here: https://cdn.accredible.com/remote-certificate-designer-demo.html