Build LeadSquared Portal Using HTML

1. Feature Overview

LeadSquared Portals enable you to build your own customized online portals (for education/insurance/medical applications, course registrations, etc.) to capture leads and opportunities. This article shows you how to build a portal using the Upload Code option.

To learn how to build a portal without writing any code, see LeadSquared Portal Designer.

 

2. Prerequisites

  • You must be the administrator of your LeadSquared account.
  • You must have a Portal’s license.
  • Forms and Processes, along with portals, must be enabled on your LeadSquared account.
  • You must have developer experience.
Note: If you want to activate Forms and Processes, or receive access to your Portal’s license, reach out to support@leadsquared.com, or speak to your Customer Success Executive.

 

3. How It Works

Portals are a collection of web pages used to complete an application or registration process. Most portals have –

  • A log-in/log-out functionality where end users can generate credentials (usernames, passwords, etc), and use them to progress along the application process. These functionalities can be built using LeadSquared Portal API.
  • The actual application forms which capture the end-users information, and the process or sequence of forms for more complex applications. These functionalities can be built using LeadSquared Forms and Processes. Also, see Process Designer.

Once the forms and processes are created, you can export them as HTML files and embed them into your portal.
All forms that are part of the process will be embedded into your webpage(s) along with the process logic. You don’t need to embed any forms separately.

  1. In your LeadSquared account, on the main menu, navigate to Workflow>Process Designer.
  2. Click Create Process, then click At Specific Work Area.
  3. On the pop-up, under Available Work Areas, click Customer Portal, then select the checkbox under Web.
  4. Click Save when you’re done.

Note: You can also edit an existing process and perform steps 3 and 4.

embed process in customer portal

Now continue to build your process and publish it (for more information, see How to Create a Process). Edit the process in live edit mode, and click the code snippet code snippet icon icon on the top left side of the page (alongside the process name) –

process code snippet

Copy the process HTML and paste it in your webpage based on your customization requirements.

process HTML

Once completed, you can upload the portal on LeadSquared (in Zip format) where you’ll be able to test it on a staging environment before hosting it on the live environment.

 

4. Create the Portal

  1. From the LeadSquared dashboard, navigate to Workflow>Manage Portals.
  2. Click the Create Portal button.
  3. Provide a relevant name for the portal, and add a description if required. Once you are done, click Create.
  4. On the Portal page, under Getting Started, click Upload Code.
  5. On the Upload Portal Zip pop-up, name the version of the zip file you are uploading.
  6. You can either drag and drop the zip code file, or upload it by clicking Select File. You will have to keep the following points in mind while uploading a zip file –
    • Portals can be deployed to Test Environments by uploading a Portal Build File, as a compressed zip file.
    • The Portal Build File can be any build file of a static website which can be hosted and deployed within LeadSquared. While React is recommended, Portals support other web frameworks as well. The max allowed upload size for the zip file is 10 MB. If you have complex use cases which requires a larger zip file size, you can reach out to support@leadsquared.com or your customer success manager.
    • LeadSquared checks for the index.html file in the root of the uploaded zip file to understand the structure, runtime logic and other information about your website. Besides requiring the index.html file to be in the root of the Portal Build File, LeadSquared puts no other restrictions on the directory structure of your website.
  7. Once you have successfully uploaded the file, mention points that might be important to you or your team, under Notes.
  8. Once you’re done, click Deploy to Test.

LeadSquared Portals_3

 

5. Test the Portal

You can test the portal by first deploying it on the Test Environment. Once it is successfully tested, you can make it live.

  1. After you’ve created the portal and deployed it to the test environment, the HTML file you’ve provided is automatically uploaded to the Test Environment.
  2. For a couple of minutes, the Test Environment status will stay Red red.
  3. The status will automatically turn Green green. If it doesn’t, click on the Refresh refresh icon.
  4. If your portal is enabled in the live environment, you can click Publish to Live.

LeadSquared Portals

 

6. Configure the Portal

On the Portal page, navigate to Overview>Finishing Up>Settings, or click the Settings tab to Configure the portal. Here, you can configure the name, domain, email and SMS settings for the portal.

6.1 General Settings

Provide the name and description of the portal. This will help your users identify the portal. Once you’re done, click Save.

LeadSquared Portal

 

6.2 Domain Settings

Default Domain – You can host your portals on LeadSquared’s default domain.

  1. In the Domain Settings column, enter a subdomain name for the portal you’ve created.
  2. The URL for the default LeadSquared domain is “lsqportal.com
  3. Once you have added the details, click Confirm.

To delete the portal, click Delete Portal.

LeadSquared Portal

Custom Domain – Alongside Use Custom Domain, enable the enable icon slider to host the portal on your own custom business/brand sub-domain (e.g., applications.mybusiness.com).

For details, see Use Custom Domains for Your Portals.

 

6.3 Email Settings

You can edit or disable email notifications a lead or opportunity would receive for “Signup”, “Forgot Password”, and “Password Reset”. To configure these emails –

  1. Navigate to Settings>Email Settings.
  2. Expand the email tab. You will find the Disable Email and Edit options.
    1. If you want to edit the email, click on the Edit button. This opens a window where you can edit the email.
    2. Once you’re done editing the mail, click Done.
      • To send out a test mail, click Save and Test, and on the Test your email content pop-up, enter the mail Id to which you want to send the test mail.
  3. To disable these emails, click Disable Email, and confirm that same.

LeadSquared Portal

 

6.4 SMS Template Settings

To verify your lead’s mobile numbers (for Portal Registration and Portal Login), we send out OTPs via SMS. This is done by default, and it requires no additional configuration from your end. To include your company’s name in the default SMS, click Edit, and enter the name.

Note: To use your own custom SMS template, reach out to your account manager or write to support@leadsquared.com.

LeadSquared Portal

 

7. Version History

You can view the various versions of the code that was uploaded on this portal.

  • Under Actions, click the Actions icon against any version of the code.
  • To test a previous version of the code, click Publish to Test.
  • To download a previous version of the code, click Download Zip.

Test Upload

 

8. Releases

  • You can check all the versions that have been uploaded to the portal under the Releases tab.
  • The default selection is All Releases, but you can also filter by Test Releases and Live Releases.

Releases

 

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?

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments