Document Designer

1. Feature Overview

LeadSquared’s Document Designer is a DIY feature that enables you to create templatized documents (such as Application Forms, Fee Receipts, etc.). You can link these documents to Portals, where leads can input relevant data, preview and download these documents.

Through this feature, you can create documents from scratch, or build documents using pre-existing templates available by default in your account. This gives you complete control over the look and feel of the documents hosted on your website, and helps streamline the entire document generation process. What’s more, you can make real-time updates and changes to live document templates on your own, without having to depend on the LeadSquared support team. This will help increase efficiency, and reduce turn-around time (TAT).

2. Prerequisites

• This is a paid feature. To enable it, contact your account manager, or write to support@leadsquared.com.
• You must be an Admin user to install this feature and create document templates.

3. How it Works

Before you install the Document Designer app, Create a Custom Activity that’ll be posted when a lead performs an action on your website/Portal (e.g., Document Submission, etc.). When you’re creating this custom activity, it is mandatory to add the following fields to the activity –

• A String type field to store the document generation status.
• A Custom Field Set (CFS) field, with the Type set to File, and the File Type set to PDF, to store the generated document URL.

1. Once the custom activity is created, install the connector. When configuring the form design, you can choose to create a template from scratch or edit a pre-existing template.
2. Once the document design is ready, Publish it. When you publish the document, select the CFS PDF file type activity field you created, where the document URL will be stored. And, select the String type activity field you created, where you can store and display the document generation status.
3. Once the document is published, a webhook URL is generated. Use this URL to set up an Automation, using the custom activity you created as the automation trigger. Then, add a webhook card to this automation, and pass the webhook URL that was generated when the document was published. This ensures that every time the custom activity is posted, the webhook is triggered, and the document is generated.
4. Add the CFS field (from the custom activity) to the portal/website (either directly to the portal code or by adding a block using the Portal Designer), where your leads can preview and download the document.

4. Install the Connector

Before you create document templates, you must install the Document Designer connector in your account –

1. Navigate to Apps>Apps Marketplace.
2. Search for Document Designer, and click Install.
   • Alternatively, you can find the connector on the left panel, under Generic Integration.
3. Once installed, hover your cursor over , and click Configure. On the Configure Document Designer pop-up, click Open Document Designer.

5. Create Document Templates

Once the connector is installed, to design the document generation process –

1. Navigate to Apps>Document Designer.
2. On the Document Designer page, click the New Template button.
3. On the Create Document Template pop-up, enter the following details –
   • Template Name – An internal display name for the template.
   • Select Activity – Select the custom activity you created to store the generated document and its status.
4. Once you’re done, click Continue.
5. You can either choose to build a document from scratch, or you can edit and modify a pre-existing template. We’ll be editing a pre-existing template and selecting the Application Form template.

6. Add Components

Configure the components you want to add to your document.

6.1 Header

The header is the top-bar section in the document. Edit and configure the header to reflect your organization’s details.

Header Design
From the options listed under Header Design Styles, select the background design style and the background colour of the Header. From the colour picker, select the background colour. Alternatively, you can enter the hex code of the colour of your choice.

Logo
The logo that’s displayed in the document header. To change the header logo, click , and enter the URL of the new logo.

Header Text
Configure the Heading and Body display text present on the form header.

• Heading Text – The header display text. Only alpha-numeric characters are supported. You can add up to 40 characters in the Header (including spaces), and 100 characters in the Body (including spaces).
• Font Family – From the dropdown, select the header text font.
• Font Size – Configure the header text font size.
• Colour – From the colour picker, select the font colour. Alternatively, you can enter the hex code of the colour of your choice.
• Style – You can also change the text style to Bold, Italics and Underline.

Add Fields
You can display data present in lead/activity fields directly on the document. For e.g., you can select the Gender lead field to dynamically display the lead’s gender. You can select custom and system lead fields, but only custom activity fields.

6.2 Section

A section is used to display text content, along with lead/activity field details. Each section contains a Heading and Subheading text box, and under each subheading, you can add lead/activity fields. You can add and configure multiple sections. You can also mail merge lead/activity fields to dynamically display data stored in these fields.

Section Heading
Enter and configure the header text for a section.

• Heading Text – The header display text. Only alpha-numeric characters are supported. You can add up to 40 characters in the Header (including spaces).
• Font Family – From the dropdown, select the header text font.
• Font Size – Configure the header text font size.
• Colour – From the colour picker, select the font colour. Alternatively, you can enter the hex code of the colour of your choice.

Section Subheading Text
Select the lead/activity fields you want to display as a part of the section (e.g., First Name, Phone Number, etc.). The subheading text is similar to the header text, where you can change the subheading of a section.

6.3 Text

The Text component allows you to display simple text data on the document. The rich text editor allows you to modify the text as per your preference. You can also add a Table to the document through the Text component.

6.4 Image

This component allows you to display an image in the document. You can either mail merge an image type field part of the custom activity or add the URL of an image that’s uploaded to the Images and Documents library.

Once you’ve added the image, you can align it as per your preference.

6.5 Declaration

This component displays your lead’s declaration. We’ve provided a templatized version of a declaration. You can make modifications to the declaration, add lead/activity fields, and change the declaration layout.

6.6 Line

Lets you add a line break line between different components. You can change the line colour, by picking a colour from the colour picker. Alternatively, you can enter the hex code of the colour of your choice. You can also change the line thickness.

6.7 Footer

The document footer, where you can add plain text content (e.g., college address, contact details, etc.). The footer also comes with a default line, which you can edit and modify.

Footer Text
Enter and configure the footer text.

• Footer Text – The footer display text. Only alpha-numeric characters are supported. You can add up to 50 characters in the footer.
• Font Family – From the dropdown, select the footer text font.
• Font Size – Configure the header text font size.
• Colour – From the colour picker, select the font colour. Alternatively, you can enter the hex code of the colour of your choice.
• Style – You can also change the text style to Bold, Italics and Underline.

Line
Configure the line present above the footer text. You can change the line colour, by picking a colour from the colour picker. Alternatively, you can enter the hex code of the colour of your choice. You can also change the line thickness.

6.8 Other Actions

You can perform the following actions on a component –

• Move the component up/down.
• Add a similar component.
• Delete the component.
• The document designer auto-saves your progress every 20 seconds.
• You can also break the page using the Break the Page action.

6.9 Preview Document

You can preview the document anytime during the document creation process. Click Preview, and select a lead whose details will be visible on the document.

7. Publish the Template

Once the document is ready, publish it to your account.

1. On the top-right corner, click Publish.
2. On the Publish Template pop-up, select the following –
   • Store the document – From the dropdown, select the CFS PDF type field you’ve integrated with the custom activity. Once generated, the document is stored in this CFS field, from where the lead can view and download the document.
   • Document generation status – From the dropdown, select the String type activity field that’s part of the custom activity. The document generation status is stored in this field.
3. Once you’re done, click Publish.

Once the document is published, a webhook URL and token value are generated. Use these URLs to set up the automation in the next step.

8. Set up the Automation

This automation is set up using the custom activity as the trigger. Every time the activity is posted, the webhook URL (which was generated after the document was published) generates a document for the lead.

1. Navigate to Workflow>Automation, click Create Automation, select New Activity on Lead as the trigger.
2. From the Select an activity dropdown, choose the custom activity you created, and click Save.
   • Disable the “Run Only Once Per Lead” setting.*
3. Click , and under Custom, click Webhook.
4. On the Webhook pop-up, enter the following details –
   • Name – Enter a relevant name for the webhook. We’re calling it “Document Generation”.
   • URL – Select the method as https://, and paste the connector’s webhook URL that was generated. Before you paste the URL, ensure you remove “https://” from the URL.
   • Content Type – Select application/json.
   • Save Response – You can select either Yes or No.
   • Custom Headers – Click Add, and enter the following details that were generated in the previous step –
     • Name – Enter the name (“templateToken”) present under Custom Headers.
     • Value – Enter the value present under Custom Headers.
   • Notify on Failure – Select which user you want to notify if the webhook fails.
   • Retry Count – The number of times you want to retry when the webhook fails.
5. Once you’re done, click Save, and then click Publish.

Every time the automation is triggered, this webhook generates a document, which will be stored in the CFS PDF type field stored in the custom activity.

9. Next Steps

When the automation fires, the document is generated and stored in the CFS PDF-type activity field. To display the document to your leads, you must include the CFS PDF in the Portal –

• If you’re using a Portal built with HTML, add the CFS PDF type field to the code.
• If you’re using a Portal built using the Portal Designer, create a block to add the CFS PDF type field.

10. Other Actions

Once the document template is published, you can perform the following actions from the Manage Templates screen –

• Copy Webhook URL – This allows you to copy the webhook URL directly from the dashboard screen.
• Clone – Allows you to clone the entire template.
• Rename – Allows you to change the internal display name.
• Live Edit – Allows you to make changes to a live document template, without having to unpublish the template.
• Unpublish – Allows you to unpublish the template.

Any Questions?

Did you find this article helpful? Please let us know any feedback you may have in the comments section below. We’d love to hear from you and help you out!