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.
Contents
- Database structure
- Designing your certificate
- Creating a PDF of the certificate
- Adding multiple certificate styles
- Further resources
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:
Certificate with mapped fields
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).
Certificate Page
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.
Group with certificate image
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:
Blank Certificate Image
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.
Certificate with dynamic data
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:
Dynamic text elements on certificate page
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.
Certificate 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:
Creating 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:
Unique ID of Certificate
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:
Populating certificate data from page URL
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:
- Install the PDF Potion plugin from the Bubble plugin marketplace
- Register for an account on the PDF Potion website
- 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
You can read steps 1-2 of our quickstart guide for more details on how to do this.
Once you've installed PDF Potion, you'll have access to a new 'Create PDF' action. Add this action after the action where you create a new 'Certificate' entry in your database.
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
Create PDF action for certificate
- 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
Custom dimensions on certificate
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.
Certificate PDF in Bubble file manager
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.
Enabling backend workflows
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:
- id (type: text)
- link (type: text)
Backend workflow - get_pdf
It is essential to use the exact spelling provided above for these 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.
Updating certificate
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:
Backend workflow URL
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:
Callback URL - Create PDF
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:
Certificate link in Bubble database
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.
Download certificate - custom 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:
Downloading certificate
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)
Triggering custom event when data change
Whenever a user creates a certificate in your app, they should now automatically download a PDF of it in their browser:
Downloading certificate
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'
Option set for certificate images
Add a repeating group on the page of your app where users are creating the certificates and show the Certificate Images
Bubble.io repeating group with 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
Note: It may seem unnecessarily complex to manually create individual groups for each of the certificate templates, rather than simply using a repeating group/searching for a single option. The reason we do this is because each of your templates are very likely to have slightly different locations for all of the dynamic text elements
In the below example, we have four separate container groups for each of our certificate template images
Certificate page with 4 template options
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:
Certificate images custom state Bubble.io
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:
Setting state based on click - Bubble.io
Add a URL parameter to the end of the 'Page Name' field in the 'Create PDF' action in the below format:
URL parameter with template image
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:
Create PDF action in step-by-step mode
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
Conditions based on page URL
Your users can now choose between the templates you provided!