Create Portals with Multiple Web Pages

1. Feature Overview

This article shows you how to add multiple web pages (home page, contact us page, application dashboard, etc.) to your LeadSquared Portals, using the Portal Designer. You can also make logins compulsory to view certain pages. This can be used for application and user profile pages.

LeadSquared Portals

 

2. Prerequisites

Portals Designer is part of the Portals feature. To enable Portals on your account, please write to support@leadsquared.com.

 

3. Getting Started

To create a new page –

  1. On the Portal Designer page, on the top-left corner, click the LeadSquared Portals Page icon.
  2. On the Pages tab, click Add New Page.
  3. Enter relevant details in the following fields –
FieldDescription
NameThe name of the page. This is visible on the Portal Designer. This field is mandatory.
TitleThe title of the page. This is visible on the published portal, and can be seen by anyone who’s on the website. This field is mandatory.
Parent PageThe parent page to which the new page will be linked to. You can select the Parent Page from the list of pages available on the dropdown.
URLThe page’s URL slug. This will be visible in the browser, and the URL can be used to access the page directly. For example, the URL of a ‘Contact Us’ page can be written down as ‘contact-us’. This field is mandatory.
Requires LoginIf you want to enable login on this page, toggle the enable icon slider. If this feature is turned on, then a User Profile icon is added to the top-right corner of this section.

4. Once you’ve entered all the necessary details, click Add. You’ll get a message saying ‘Page Created Successfully’.

Create Pages in Portal Designer

You can create a new webpage by cloning an existing portal page. This will retain the structure of the original page, and you can change the content within the page as per your requirement. To clone a portal page –

  1. On the Portal Designer, click the LeadSquared Portals Page icon on the top of your screen.
  2. On the Pages tab, against the page you want to clone, hover your cursor over the LeadSquared Portals icon.
  3. From the dropdown options, click Clone.
  4. On the Add New Page tab, enter the relevant details, and click Add. You’ll get a message stating, “Page Created Successfully”.

LeadSquared Portals

 

4. Default Styles

Here you can customize the font and accent colours for all content boxes, across all pages. All changes made here are applied at the global level, eliminating the need for you to customize each section on each page. It helps apply uniform and consistent fonts and colours across the entire portal.

4.1 General

  • Favicon – Upload a relevant icon for the portal, which will show up as the favicon on a browser window. To add a favicon, click Choose File.

LeadSquared Favicon

  • Accent Colour – Select the font colour for all the form section headers and buttons on all the pages, from the gradient screen, or enter the hex code for a specific colour.
  • Font Family – Select the font for all the content boxes spread across all the pages.

LeadSquared Portals_5

 

4.2 Heading

Customize the font colour and font size for all the headings across all the pages.

LeadSquared Portals_6

 

4.3 Paragraph & Text

Customize the font colour and font size of all the content boxes across all the pages.

LeadSquared Portals_7

 

5. User Profile

When you turn on the Requires Login setting for a page, the page will be marked with a lock lock icon icon. Pages requiring login will not be accessible to users until they successfully log in to the portal.

LeadSquared Portals_8

All pages requiring login will automatically display a User Profile LeadSquared Portals Page icon. Click on the icon to customize it.

5.1 General

  • Profile Design – The appearance and design of the User Profile icon. The following options are available –
    • Icon – Only the icon will appear. You can customise the icon colour by clicking the icon, and select the colour from the gradient screen, or enter the hex code for a specific colour.
    • Icon&Name – The icon, along with the lead’s name will appear. You can customise the icon colour by clicking the icon, and select the colour from the gradient screen, or enter the hex code for a specific colour. You must configure the mail merge field, for the lead’s name to show up. To configure the name field mail merge value, double tap on the existing value, and make changes.
    • Name – Only the lead’s name will show up here, without any icon. You can customise the icon colour by clicking the icon, and select the colour from the gradient screen, or enter the hex code for a specific colour. You must configure the mail merge field, for the lead’s name to show up. To configure the name field mail merge value, double tap on the existing value, and make changes.
    • Avatar&Name – To add a lead’s avatar to the User Profile, you must add a mail merge value. This will pull the relevant image and display it alongside the lead’s name. To configure the name field mail merge value, double tap on the existing value, and make changes.
    • Avatar – To add a lead’s avatar to the User Profile, you must add a mail merge value. This will pull the relevant image and display it.
  • Show Dropdown – If you want the User Profile actions to be visible under the icon, you must enable this setting by toggling the enable icon slider.
  • Lead (Only for preview) – You can select a lead to preview the user profile icon.

LeadSquared Portals Page

 

5.2 Spacing & Dimensions

  • Padding – Set the padding for the User Profile icon. If you want the padding dimensions to be applicable on all sides of the icon, against All Sides, toggle the enable icon slider.
  • Margin – Set the margin width for the User Profile icon. If you want the margin to be applicable on all sides of the icon, against All Sides, toggle the enable icon slider.
  • Min Height – Set a minimum height for the User Profile icon. If you want the height to be set automatically, against Auto, toggle the enable icon slider.
  • Max Width – Set the maximum width for the User Profile icon. If you want the height to be set automatically, against Auto, toggle the enable icon slider.

PDesigner_5

 

5.3 Border & Radius

  • Border – Set the size, style and colour for the border around the User Profile icon. If you want the border to be applicable on all sides of the selected layout, against All Sides, toggle the enable icon slider.
  • Border Radius – Set the radius for the border around the User Profile icon. If you want the border radius to be applicable on all sides of the layout, against All Sides, toggle the enable icon slider.

PDesigner_6

 

5.4 Background

You can either choose to leave the background of the User Profile icon blank, or set an image or a background colour.

  • To set the background colour, from the dropdown, select Color. Then, choose a colour from the gradient screen, or enter the hex code for a specific colour.
  • To add an image, from the dropdown, select Image. Then, click on Choose Image to choose an image from your Image Library.
  • To leave the background blank, from the dropdown, select None.

Portal Designer_E_1.1

 

5.5 Shadows

Set a shadow for the icon.

PDesigner_8

 

5.6 Advanced

  • Opacity – Set the opacity for the User Profile icon.
  • Hide on Mobile – To hide the User Profile icon on a mobile device, toggle the enable icon slider.

LeadSquared Portals Page

 

6. Applications

You can add ready to use application blocks to your portal.

LeadSquared Portals Application

Each application can be added as a content block that shows some basic information related to the application (name, type, created on date, etc.) the status (pending, completed, etc.), and available actions (view, continue, etc.). Once an application block is added you must integrate an activity or opportunity. The associated activity/opportunity form will be launched, and the user can fill in the relevant details.

  1. Hover your cursor on a particular section, then click the LeadSquared Portals PageAdd Block button.
  2. From the Add Block pop-up, click Application, and then select a relevant layout for your page.
  3. Select either an activity or an opportunity that you’re looking to integrate. Fields corresponding to the selected activity or opportunity will become for mail merge within the application items.
  4. After you’ve selected the item to integrate, select the activity or opportunity type.
  5. Then, configure the Display Rules and Application Properties.

LeadSquared Portals

 

6.1 Display Rules

Display rules allow you to configure which application boxes you want to display to your users, based on field values or combination of field values. In this example, we’re configuring two application boxes, one to be displayed when the application status is ‘Inactive’, and the other one to be displayed when the status is ‘Active’.

  1. Configure the application item.
    1. Set the mail merge values you want to display within the application item. For example, status, created on date, etc. To add mail merge values, you’ll have to begin with ‘@’.
    2. Next, set the action buttons you want to display. For example, on a pending application, the button can display ‘Finish Application’ or ‘Continue Application’, and direct the user to the application form.
  2. Once the application items are configured, set the Display Rules.
    1. Stay on the Application Item box, and from from the right panel, under General, click Display Rules.
    2. On the Dashboard Item Display Rules pop-up, select the field and the values based on which you want the application items to be displayed. You can add a combination of fields and values, based on which the items can be displayed. You can choose to apply All the rules or Any of the rules.
  3. Once you’ve set the display rules, you must then configure the application properties.
Note: You can configure the look and feel of each individual Application Item. This includes the font, colour, behaviour, etc., of the overall application, and the mail merge values as well as the action buttons.

LeadSquared Portals

 

6.2 Application Properties

  • General
    • Integrate – From this dropdown, you can integrate the application with an activity or an opportunity.
    • Activity/Opportunity Name – From the dropdown, select the relevant activity/opportunity name.
    • Accent Color – Select the colour of the call-to-action button and tabs from the gradient screen, or enter the hex code for a specific colour.
    • Lead (Only for preview) – You can preview the application for a specific lead. To do so, select the lead’s name from the dropdown.
  • Advanced
    • Opacity – This allows you to configure how opaque/transparent the card will be.
    • Hide on Mobile – This allows you to hide the block on mobile devices.

LeadSquared Portals

The other application properties (such as Spacing & Dimensions, Border & Radius, Background, etc.) are the same as elsewhere within the portal designer. To know how to configure them, please refer to LeadSquared Portals Designer.

 

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!

Was this Helpful?