4.2.6 Configure certificate templates

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

Step 1. Configuring certificate SVG file

The next step is for you to design and configure your certificate template SVG files. Your certificates will be different SVG files for each vital event. You use {{ handlebar }} syntax to mark where in the SVG you wish the citizen data to be rendered. 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	Default birth handlebars
Death	Death Certificate	Default death handlebars
Marriage	Marriage Certificate	Default marriage handlebars

We have supplied helper handlebars for all 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 or email us at [e-mail] 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. This handlebar dynamically returns the location hierarchy, e.g. "district, state" to render based on the location of the health facility. 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. 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 Open the SVG in a text editor tool such as Visual Studio Code. Replace the dummy text you added with the required handlebar. Example: <text fill="#222222" xml:space="preserve" style="white-space: pre" font-family="Noto Sans-Bold" font-size="16" font-weight="bold" letter-spacing="0px"><tspan x="86.6699" y="444.268">{{eventDate}}&#10;</tspan></text>\

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!

Step 2: Add custom font files

Drop your custom font file (.ttf) in this directory: https://github.com/opencrvs/opencrvs-countryconfig/tree/develop/src/api/fonts Then add an entry regarding your new font similar to the "NotoSans" ones here: https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/api/certificate-configuration/handler.ts#L27-L34For example, if we wanted to add the Merriweather font it would look something like this:

    fonts: {
      ['Noto Sans']: {
        normal: `${COUNTRY_CONFIG_URL}/fonts/NotoSans-Regular.ttf`,
        bold: `${COUNTRY_CONFIG_URL}/fonts/NotoSans-SemiBold.ttf`,
        italics: `${COUNTRY_CONFIG_URL}/fonts/NotoSans-Regular.ttf`,
        bolditalics: `${COUNTRY_CONFIG_URL}/fonts/NotoSans-Regular.ttf`
      },
      ['Merriweather']: {
        normal: `${COUNTRY_CONFIG_URL}/fonts/Merriweather-Regular.ttf`,
        bold: `${COUNTRY_CONFIG_URL}/fonts/Merriweather-Black.ttf`,
        italics: `${COUNTRY_CONFIG_URL}/fonts/Merriweather-Regular.ttf`,
        bolditalics: `${COUNTRY_CONFIG_URL}/fonts/Merriweather-Regular.ttf`
      }
    }

This would require the "Merriweather-Regular.ttf" & "Merriweather-Black.ttf" file to be available in the directory mentioned above.

Step 3. Seed, or upload and preview

When you are ready to seed your database in step 3.2.8, these certificates will be uploaded. Alternatively, a National System Admin user can upload the certificate template at any time in the functional configuration UI. You can preview the certificate to check that the some handlebar data is loading as intended.