Create a Template

  1. Navigate to the Template component present under CONVERT section in SmartBrowz from the console, and click Create Template. catalyst_smartbrowz_templates_blank

  2. Enter a Template Name and select a template design. You can select from one of the pre-configured templates, or select Custom to design a template from scratch. catalyst_smartbrowz_templates_name
    You can see a preview of each pre-engineered style of template by clicking the zoom-icon. catalyst_smartbrowz_templates_zoom_icon

  3. Click Create. catalyst_smartbrowz_template_created

Customize a Template

You can now customize the template you chose. We will illustrate the implementation of the template customization using the Certificate Template.

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

catalyst_smartbrowz_template_HTML

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

You can customize the HTML, CSS, and JavaScript code based on your requirements. 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 Refresh button in the Preview section of the console.

catalyst_smartbrowz_template_refresh_hilit

Note: In the Preview section, you can also click the download icon to download the template shown in the preview as a PDF document, and click the maximize icon to view the preview of the visual document in a more detailed manner.

You also have the option to provide additional formatting options for your template by clicking the Template Settings button.

catalyst_smartbrowz_template_settings

In this section, you can use the various drop-down selections to choose the format and the layout of how you wish your template to appear. You will also be able to view how your customizations will be rendered in the template using the Live Preview section.

catalyst_smartbrowz_template_settings_change

Click Save Settings to confirm your preferences after you configure them. You can also Click the Reset button to revert your settings to its default values.

catalyst_smartbrowz_template_settings_save_reset

After you have complete styling your template, you can store it in the console by clicking the Save button.

catalyst_smartbrowz_template_save_highlit

You will now be able to access this template at any time from the Templates component.

catalyst_smartbrowz_templates_created_complete

Note: Catalyst will generate unique ID for each template you create. You can use this ID in your code, to generate a visual document using a template, such as a PDF or a screenshot.

The templates that you have created can now be used as input type in the PDF & Screenshot component to generate visual documents.

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

ON THIS PAGE