How to create a certificate generator in Bubble.io

This article will show how you can add a certificate generator to your Bubble app. Users will be able to choose from a number of default certificate styles, add custom information and download their certificate as a PDF.

Database structure

If you're looking to add a certificate generator to an existing Bubble.io app you've developed, you will likely have already structured your database. Thankfully, you're not going to need to change too much to add a certificate generator to your app.

 We recommend creating a custom data type called 'Certificate' with the following custom fields:

• Name Awardee (text) - the name of the person being awarded the certificate
• Award Description (text) - this is the description of why the certificate is being awarded
  
• Date (text) - the date the certificate is being awarded on
  
• Signature of Signer (text) - the name of the person who signs the certificate
  

The image below shows how these custom fields relate to the info that will actually be shown on the PDF your users generate:

You will also need to add a 'Link' field. This will be important for allowing your users to download the PDF of the certificate later.

• Link (text) - a URL link to the PDF of the certificate

Designing your certificate

We recommend designing your certificate on a dedicated page within your Bubble app. This page will serve exclusively as a template for generating PDFs of certificates and should not be accessible to users.

Type of content

Set the 'Type of content' on the page to be equal to 'Certificate' (the custom data type created earlier).

Container group

Add a group to the page and set it to have a fixed height and width. The height and width of the group should equal the dimensions you actually want to generate the PDF of the certificate in. We've found using a height of 575px and a width of 820px works well, but you can choose whatever dimensions you want.

Set the 'Background Style' of the group to be 'Image' and upload an image of a certificate.

Note: You will want to exclude any text from your image that might conflict with the dynamic data you'll be adding later. This is how the 'blank' version of one of our certificate images looked like when we loaded it:

Adding dynamic data

Add in text elements to show data specific to that certificate. For example, in the below image we've put a text element that contains 'Current page's Certificate's Name (Awardee)' in the center of the cert. 

It can be a bit tricky to get the text elements to line up exactly where you want them. We recommend setting the container layout of the group to 'Align to parent' and adjusting the margins on each of the text elements until you think you have them where you want them (it will very likely take a bit of trial and error!). You should have 4 text elements with dynamic data when you're finished:

You'll note the font for the dynamic text element with the has a different font to the others. This is because we want this piece of text to look like a signature. We've found the 'Ingrid Darling' font, which is one of the Bubble defaults, works well for giving a signature-style look to a piece of text.

Creating a PDF of the certificate

Now that your 'certificate' page is setup, you can start actually generating PDFs of the certificates in your Bubble app.

Add input elements to capture custom data

Go to the page of your app where users will be generating the certificates from and add four input fields - one each for the awardee name, the date, the award description and the name of the person awarding the certificate (for their signature). Also add a button beneath these input fields.

Create a new 'Certificate' in your database

Attach a workflow to the 'Create' button that creates a new 'Certificate' entry in your database when the button is clicked. Use the data from the inputs to fill out the various fields for the Certificate:

You can now preview how your certificate is going to look! Go to your database and copy the unique ID associated with the Certificate you just created:

Navigate to the 'certificate' page of your app and add '/' and the unique ID to the end of the page URL. This will result in the dynamic data on the page being populated:

Generating the PDF

You can use PDF Potion to generate PDFs of the certificates your users create. To get up and running, you'll need to:

1. Install the PDF Potion plugin from the Bubble plugin marketplace
   
2. Register for an account on the PDF Potion website​
3. Generate an Access Token in the 'My Account' section of your PDF Potion dashboard and paste it into the 'Access Token' and 'Access Token - dev.' fields in the 'Plugins' tab of your Bubble editor

The "Create PDF" action includes quite a few fields, but not all need to be filled out. However, a few key fields are required:

• Website Home URL: Use the dynamic expression 'Website home URL'
  
• Page Name: Add the name of the page you designed the certificate on (EG 'certificate'). Also add a '/' + the unique ID of the certificate you created in the previous step to the end of the page name
• Identifier: The unique ID associated with the certificate you created in the previous step
  

• Page Format: Select 'Custom' so you can set the exact dimensions of the PDF in the 'Custom Format' fields (discussed next)
  
• Unit: Select 'px' so that you can match the height/width to the dimensions of your 'certificate' page
• Width: Add a value that is equal to the fixed width you used for the container group on the 'certificate' page
• Height: Add a value that is equal to the fixed height you used for the container group on the 'certificate' page
  

At this stage, Bubble will indicate an issue because the 'Callback URL' field is empty (we'll address this shortly). However, you can still move forward with generating the PDF.

Click the button linked to the workflow, then navigate to the 'File Manager' section in the Database tab of your Bubble editor. You should find the generated PDF of the certificate there. Keep in mind that it may take a few seconds for PDF Potion to process and upload the PDF, so you might need to refresh your browser.

Linking the PDF to an entry in your database

In order to let users download the certificate, you'll need to add a link to the 'Certificate' entry in your database. 

The Callback URL field in the 'Create PDF' action becomes relevant at this point.

To use the Callback URL, you need to first enable backend workflows in your Bubble editor by going to:

Settings -> API -> and checking the 'Enable Workflow API and backend workflows' option.

NOTE: you will need to be on at least a Starter Bubble plan to enable backend workflows

Navigate to the backend workflows section in your Bubble editor and create a new API workflow (in this example, we’ve named it 'get_pdf'). Then, add these two keys:

Add an action to the workflow to update a Certificate. Use a filter to select the first item where the unique ID matches the key ID being passed. This ensures that you are updating the first (and only) Certificate in the database with a unique ID that matches the key ID.

Next, set the 'Link' field of the Certificate to the value of the 'link' key.

This API workflow must be triggered each time a PDF of the certificate is created and uploaded by PDF Potion to your Bubble database. To achieve this, add URL associated with the API workflow to the Callback URL field in the 'Create PDF' action. 

To find the correct URL, navigate to:

Settings -> API

and copy the 'Workflow API Root URL' value:

Paste this value into the 'Callback URL' field of the 'Create PDF' action and append the name of your backend workflow at the end. Then, replace all text before 'api...' with the dynamic expression 'Website home URL'. You should end up with something similar to this:

Now when you create a new certificate, you should see a URL in the 'Link' field in your database. This links to the PDF of the created certificate:

Letting users download the certificate

To enable users to download their PDFs, create a custom event on the page where the certificates are generated. In the image below, the custom event is named 'Certificate Generated.' Add a parameter to the custom event, such as 'Certificate,' and set its data type to match the custom data type associated with the PDF link.

Add a 'Download PDF' action to this event so that the user downloads a PDF of their certificate whenever the event is triggered. Set the 'Link' field to be equal to 'Certificate's Link' and add a name for your certificate in the 'File Name' field:

The custom event now needs to be triggered whenever the link field in the 'Certificate' is updated with the URL to the PDF of the certificate. To do this, we can use Bubble's very handy 'Trigger a custom event when data changes' action. In our case, we're: 

• Triggering the 'Download Certificate' event
• Setting the 'Thing to Watch' to be the Certificate created in step #1 of the workflow
• Watching the 'Link' field to see when it changes (i.e. when it goes from blank to having a URL added by our backend workflow)

Whenever a user creates a certificate in your app, they should now automatically download a PDF of it in their browser:

Note: you'll notice in the above GIF that we're showing a loading screen while the PDF of the certificate is being generated. You can implement this by following the steps outlined in this doc.

Adding multiple certificate styles

You may want to provide your users with a number of default certificate styles they can choose from. There are a number of ways you can do this, but our recommended approach is:

Create an option set with a number of certificate images that can be used templates. In the example below, each certificate image has a 'Display' and an 'Image'

Add a repeating group on the page of your app where users are creating the certificates and show the Certificate Images

Add a corresponding number of container groups to your 'certificate' page, with each group having a certificate image set as it's background

In the below example, we have four separate container groups for each of our certificate template images

The trick now is to show the correct group and hide all the irrelevant groups when a user creates a certificate. To do this, you can use a URL parameter. 

Create a custom state on the page where users create the certificates and set the 'State type' to be equal to the option set you created:

Add an action so that when a user clicks on one of the images in the repeating group, it sets this custom state to equal the certificate image selected:

Add a URL parameter to the end of the 'Page Name' field in the 'Create PDF' action in the below format:

Now, whenever a user runs the 'Create PDF' action, it will be telling PDF Potion to generate a PDF of the page in your app with this URL structure:

The 'template' URL parameter can be used to show/hide the relevant container group on your certificate.

• Check the 'Collapse when hidden' option on all of your container groups
  
• Add a condition to the groups so that they are visible when the 'template' value in the page URL is equal to the relevant option's display
• Add a similar condition to each group so that they are hidden when the 'template' value in the page URL is NOT equal to the relevant option's display

Your users can now choose between the templates you provided!

Further resources

• ​PDF Potion documentation​
  
• ​PDF Potion quickstart guide​