Customize a Template

Once you have chosen a template design, you will be directed to the template editor inbuilt in the console that allows you to customize your template and further style it to your preference. For this help document, we will illustrate customizing a template using the Certificate template.

Styling The Template

You will have respective editor sections for HTML, CSS and JavaScript to style and customize your template directly in the console. catalyst_smartbrowz_template_created

Note: For a more optimal coding environment, you can click the Maximize button at the bottom of the console.

You can use the JSON Data section to pass custom input data to the template. catalyst_smartbrowz_template_json

You can constantly check and verify the changes you have made in the editor by clicking the Save button in the Editor section of the console. catalyst_smartbrowz_template_refresh_hilit

Customizing the Orientation and Layout of the Template

Using the Settings section, you can password protect your visual document, style the layout and the orientation of the document and also decide your output format. catalyst_smartbrowz_template_settings

In this section, use the various drop-down selections to customize the following features of your template:

  • Output format
  • Paper size
  • Orientation
  • Background graphics


You can further change the margin-orientation of your template, by clicking Show Advanced Styling Options. catalyst_smartbrowz_template_advanced_ops

  • While configuring your document’s Header and Footer, you can either provide values in the input field, or you can code your customization in HTML by selecting the HTML Code option.

  • While inputting values for the Header and Footer, ensure you provide it as 10px or above to view the change in the preview section.

Password Protected PDFs

Templates allows you to password protect documents that are generated using a template. You can either manually set the password for your template, or you can code a logic that instructs Catalyst to set a password dynamically.

Note: To password protect your visual document, the Output Format of your document has to be PDF.

To password protect PDFs, click the Set Password for PDF toggle: catalyst_smartbrowz_templates_pwd_protect

  1. There are two ways you can set a password for your PDF:

    • By default, the Set Password Manually option will be selected. Choosing this option, allows you to set the password for your PDF in the Playground section of the PDF & Screenshot component. catalyst_smartbrowz_templates_pwd_protect_depicts
    Note: You can also manually set the password for your PDF using this API by passing your password for the document as a JSON key value pair "password" inside the "pdf_options" JSON.
    • Click the Set Password Dynamically option to code a custom logic that ensures each time a PDF is generated from the template, based on the logic you coded a password will be set for the document automatically. catalyst_smartbrowz_templates_pwd_protect_dynamically
      For this help documentation, we have implemented the code snippet shown below:
Sample Logic
module.exports = (jsonData) => { // Extract the first four letters from const clientName =[0].name.trim(); // Remove leading/trailing spaces const firstNameLetters = clientName.substring(0, 4); // Extract the last four digits from client.phn const clientPhone =[0].phn.trim(); // Remove leading/trailing spaces const lastFourDigits = clientPhone.slice(-4); const password = ${firstNameLetters}${lastFourDigits}; //so password will be "Amel2782" return password; };
View more

The value for jsonData input is shown below:

{ "address": { "name": "107 Traction Street,Green Ville", "postal": "South carolina-600028" }, "client": { "data": [ { "name": "Amelia Burrows", "phn": "+1-212-6782782", "start": "Monday,Feburary,28,2019", "end": "Monday,March,28,2019" } ] } }
View more

The PDF document generated from this template will have a password pattern that is a combination of their first name and last digits of their phone number.

  1. Click Save.

Once you have completed all the customizations to your template, you can access your this template at any time from the Templates component.


Last Updated 2023-11-14 13:04:52 +0530 +0530