# 4.2.6 Configure certificate templates {% hint style="info" %} **Designed your certificate template?**\ Once you have designed your certificate templates you are ready to configure the SVG. Please refer to our guidance on designing a certificate here: [3.5-designing-a-certificate-template](https://documentation.opencrvs.org/v1.7/setup/2.-gather-requirements/3.5-designing-a-certificate-template "mention") {% endhint %} ### Step 1. Configuring certificate SVG files The next step is for you to design and configure your certificate template [SVG](https://en.wikipedia.org/wiki/SVG) files. You can have as many different certificate as you like, represented as different [SVG](https://en.wikipedia.org/wiki/SVG) files, for each vital event. You use **{{** [**handlebar**](https://handlebarsjs.com/) **}}** syntax to mark where in the SVG you wish the citizen data to be rendered. All your SVGs should be placed in the [**src/api/certificates/source**](https://github.com/opencrvs/opencrvs-countryconfig/tree/develop/src/api/certificates/source) folder. To get an idea of what we mean, take a look at the Farajaland example certificates and available handlebars for each event: | Event | Certificate template SVG | Available handlebars | | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | Birth |

Birth Certificate

Birth Certified Copy

| [Default birth handlebars](https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/form/birth/certificate-handlebars.ts) | | Death |

Death Certificate

Death Certified Copy

| [Default death handlebars](https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/form/death/certficate-handlebars.ts) | We have supplied helper handlebars for many use cases. Some need explanation, or if you feel that you do not have a handlebar for your specific needs, please discuss with us on [Github](https://github.com/opencrvs/opencrvs-core/discussions) or email us at and we can work on a new handlebar for you. \ \ As an example of a handlebar that needs explanation: `{{placeOfBirth}}` is used if a user selects a pre-loaded [health facility](https://documentation.opencrvs.org/v1.7/setup/3.-installation/3.2-set-up-your-own-country-configuration/3.2.3-set-up-cr-offices-and-health-facilities/3.2.3.2-prepare-source-file-for-health-facilities). This handlebar dynamically returns the location hierarchy, e.g. "district, state" to render based on the location of the [health facility](https://documentation.opencrvs.org/v1.7/setup/3.-installation/3.2-set-up-your-own-country-configuration/3.2.3-set-up-cr-offices-and-health-facilities/3.2.3.2-prepare-source-file-for-health-facilities). You can see that in our place of birth location in the SVG, we have if/else logic to handle whatever the user chooses to enter into the form. Sometimes you need to format the handlebars. For example to wrap text, or perform any number of manipulations. You can configure ["handlebar helper"](https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/form/common/certificate/handlebars/helpers.ts) functions to do this. We have some configurable helper functions to get you started [here](https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/form/common/certificate/handlebars/helpers.ts). We also have some [built in](https://github.com/opencrvs/opencrvs-core/blob/cf1cb763abae7211fa3648a742d3763fd947eaa3/packages/client/src/views/PrintCertificate/PDFUtils.ts#L183) to opencrvs-core. Such as this one, giving you access to every property that exists in a FHIR Location. ```xml {{location districtPlaceofbirthId 'name'}} ``` \ It is possible to make custom form fields and when you do, custom handlebars are automatically created. Here is an example of a [custom form field handlebar](https://github.com/opencrvs/opencrvs-countryconfig/blob/551e864ab59d59ae2e65eec8d1d0d9651ae0a3d7/src/form/custom-fields.ts#L29)\ \ Open the SVG in a text editor tool such as Visual Studio Code. Replace the dummy text you added as a placeholder for any item of citizen data that you need with the required handlebar.\ \ Example:\ `{{eventDate}} `\\ {% hint style="info" %} Watching the videos below will really help you understand how to configure the certificate. The time spent watching the video will make your life much easier! {% endhint %} {% embed url="" %} ### **Step 2: Add custom font files** Any fonts can be used in your certificate provided you have permission and are prepared to accept the client load time required to render the font file. Drop your custom font files (.ttf) in this directory: ### Step 3: Serve certificates to the application To set-up your SVG files, fonts and fees to be served to the client, you must configure the **certificateConfigs** TypeScript object [here](https://github.com/opencrvs/opencrvs-countryconfig/blob/d531d4c767cd280cb4cb5f0a7a55cd429c277054/src/api/certificates/handler.ts#L44). Our example looks like this: ``` onst certificateConfigs: ICertificateConfigData[] = [ { id: 'birth-certificate', event: Event.Birth, label: { id: 'certificates.birth.certificate', defaultMessage: 'Birth Certificate', description: 'The label for a birth certificate' }, isDefault: true, fee: { onTime: 5, late: 7, delayed: 15 }, svgUrl: '/api/countryconfig/certificates/birth-certificate.svg', fonts: { 'Libre Baskerville': { normal: '/api/countryconfig/fonts/LibreBaskerville-Regular.ttf', bold: '/api/countryconfig/fonts/LibreBaskerville-Bold.ttf', italics: '/api/countryconfig/fonts/LibreBaskerville-Italic.ttf', bolditalics: '/api/countryconfig/fonts/LibreBaskerville-Regular.ttf' } } }, { id: 'birth-certificate-certified-copy', event: Event.Birth, label: { id: 'certificates.birth.certificate.copy', defaultMessage: 'Birth Certificate certified copy', description: 'The label for a birth certificate' }, isDefault: false, fee: { onTime: 8, late: 11.5, delayed: 17 }, svgUrl: '/api/countryconfig/certificates/birth-certificate-certified-copy.svg', fonts: { 'Noto Sans': { normal: '/api/countryconfig/fonts/NotoSans-Regular.ttf', bold: '/api/countryconfig/fonts/NotoSans-Bold.ttf', italics: '/api/countryconfig/fonts/NotoSans-Regular.ttf', bolditalics: '/api/countryconfig/fonts/NotoSans-Regular.ttf' } } }, ... ``` * The **id** property must be unique. * The **event** property must be set to the supported `Event.` provided to you by TypeScript. * The **label** property must be a [react-intl formatjs ](https://www.npmjs.com/package/react-intl)object with a translation for the visible label that you wish to apply to this certificate in the select field that is available to the user. Appropriate translations must exist in your client.csv file for the **label.id** where necessary. You can learn about how to configure OpenCRVS content translation in the section: [Managing Language Content](https://documentation.opencrvs.org/v1.7/setup/3.-installation/3.2-set-up-your-own-country-configuration/3.2.5-set-up-application-settings/3.2.9.1-managing-language-content). * The **isDefault** property can only be applied to **one item per event**. Its the first item users will see in the select UI form field when choosing a certificate. * The **fee** property allows you to configure unique fees for the certificate type. Defaults are applied from applcation-config.ts * The **svgUrl** property is self explanatory. The SVG file must exist in this location. * The **fonts** property, as above, must point to ttf font files that exist in the referenced location.