1. Home
  2. Docs
  3. Addons
  4. Certificate

Certificate

The free Certificate addon of Quiz and Survey Master gives you the option of creating a certificate for users who pass your quizzes or tests; you can customize the title of your certificate, and its message, add a background, add a logo and even choose a different font by specifying the font family.

INSTALLATION/SETUP

Once you have purchased the addon, you will have access to download the addon. To install, simply upload the addon as a normal WordPress plugin. To do so, go to the Plugins page and click Add New. Then, click Upload. From there, upload the zip file that you downloaded when downloading the addon.

Once the addon has been uploaded, you should now have the plugin QSM – Certificate listed in your list of plugins. Activate that plugin. Once activated, the plugin will create a new tab in the Quizzes/Surveys list labeled Certificate.

SETTINGS/CONFIGURE

Before you can use the Certificate addon, we must first enter the license key.

Adding Your License Key

QSM Certificate - Adding Addon License Key
QSM Certificate – Adding Add-on License Key

Enter your license key from your account into the “Addon License Key” field on the “Certificate” tab of the “Addon Settings”.

Once you have entered your license key, be sure to click “Save Changes” to save the page.

After adding the License Key, you can now use the “Certificate” tab when editing your quizzes or surveys.

There are going to be times when you would like the user to be given a certificate after taking a quiz. To start setting up your certificate, first edit your quiz. Now, navigate to the Certificate tab.

configuring QSM certificate
QSM – Certificate Addon

Enable Certificate

To turn on the certificate feature, set “Enable Certificates For This Quiz?” to yes.

Orientation

It lets you set how you would like to display the certificate to your users. You can go with Portrait (Vertical) or Landscape (Horizontal).

Adding Google Fonts

QSM Certificate comes with a default “dejavusans” English font, you can go with the default font or can add a different font using Google Fonts. To add a new font, follow these steps:

If you want to set a different language other than English, you need to import the CSS of that Specific Font from google fonts.

  1. Goto Google Fonts
  2. Copy the Font’s Import CSS (without style tag)
  3. Paste it into the “Certificate Font Family” field of the Addon
  4. Copy the font-family rules and paste it into the field inside the body{} (as seen in the below image)
  5. Next, enter your text in the said language inside the content field, and Save Settings.
google fonts copy
Copying the font and CSS rules
Pasting the font with CSS rules
Pasting the font with CSS rules

You can add other CSS properties like padding, color, etc. along with the font CSS in the Custom Style Field of the Certificate Addon.

padding: 20px;
color: red;

If you are importing fonts with multiple styles and font weights then it’s better to go with any single font weight that you prefer the most. For example, in the below example, we are using Google’s Alkatra font which comes with multiple styles and font weights. However, we’ve chosen Alkatra Medium 500 as our preferred style.

Alkatra Font
Alkatra Font
Adding Alkatra font in Certificate
Adding Alkatra font in Certificate

Title

Next, fill in the “Certificate Title” text box. This will be the first line on the certificate.

Content

Enter the Main Content, this will be the main body text on the certificate. You can add a line by pushing the enter key and can make use of any of the variables in the Allowed Variables section to the left. If needed, refer to our Template Variable system guide.

If you are copying the text from other sources and pasting it in the Content field, make sure you paste it without any text formatting by Ctrl+Shift V (on Windows) and Option+Shift+Command+V (on Mac).

Some fonts don’t support Bold & Italics, if you are using Bold & Italics text formatting with a different Google Font make sure that it is originally supported by the font, if not the certificate output will be plain text.

Note: Enter the text in the same Language of which you’re using the font family.

Logo URL

To add the logo, fill in the “URL To Logo” section with the URL to your logo. The logo must be in JPG, JPEG, PNG, or GIF format.

Logo CSS

Want to align the logo to a specific location on the certificate? you can do so with CSS. Just add the CSS properties and style your logo as per your requirement.

Background Image

For adding the background/border, simply fill in the “URL To Background Img” section with the URL to your background. The background must be in JPG, JPEG, PNG, or GIF format.

Don’t forget to click the “Save Settings” Button when you are finished!

Adding Variable to Results/Emails Page

Once you have your certificate set up, simply add the %CERTIFICATE_LINK% variable to any results page or email. This will then show a link for the user to download/print the certificate.

If needed, you can also create a duplicate certificate after the user has taken a quiz by viewing the user’s results on the Results page. From there, simply go to the Quiz Tools tab and click Create Certificate.

Sample Certificate in Default English:

Sample Quiz Certificate
QSM – Certificate Addon – Sample Certificate

Sample Certificate in Hindi Font:

certificate-hindi

If you have any trouble implementing the Certificate Addon or have more questions about the process, please fill out a support ticket by going to the WordPress dashboard and selecting ‘help’ in the QSM plugin and our support guru will be able to help you.

How can we help?