3.2.6 Configure certificate templates
Last updated
Last updated
The next step is for you to design and configure your certificate template files. Your certificates will be different files for each vital event. You use {{ }} 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:
Birth
Death
Marriage
It is possible to make custom form fields and when you do, custom handlebars are automatically created. Like .
You can you use any paper size you like as a basis for your SVG.
We recommend that you use the multi-lingual font as we do in our certificate for the dynamically generated data that appears from handlebars. All other fonts should be outlined. If you really wish to use another font than Noto Sans, you can edit the font .
To render a digital signature for a registrar that is uploaded when , you need to use an image tag syntax like , and then .
Gather requirements
Define what data needs to be on your certificate and collect the certificate handlebars you need. We have supplied helper handlebars for all use cases. Some need explanation, or if you feel that you do not have a handlbar for your specific needs, please discuss with us on 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 . This handlebar dynamically returns the location hierarchy, e.g. "district, state" to render based on the location of the . You can see that in our place of birth location in the SVG, we have to handle whatever the user chooses to enter into the form.
Design your certificate! Place dummy text for for where you would like handlebar data to appear and use a dummy signature image where you would like the digital signature to appear.
Export to SVG When you have finalised your design you need to export to SVG. Important! If your using Figma make sure to uncheck 'Outline text' for the handlebar dummy text. All other fonts can be outlined.
Add handlebars
Open the SVG in a text editor tool such as Visual Studio Code. Replace the dummy text you added with the 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}} </tspan></text>
\
Seed, or upload and preview When you are ready to seed your database in , these certificates will be uploaded. Alternatively, a National System Admin 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. Please note that in our preview functionality, only a few handlebars work with a dummy registration that contains the most basic data. It is for illustration purposes only as you may configure your form in an entirely custom way.