Casa for Web

1. Feature Overview

Create and customize the homepage of the LeadSquared web application to reflect your business requirements. With the widgets available, you can –

• Create different homepages for different teams.
• Allow users to view their upcoming tasks, reports, lists – all in one place.
• Personalize your experience by adding cover image aligning with your brand.
• Allow users to view a webpage (like a help site) within the homepage.
• Quick launch icons on the homepage using icons. For example, you can configure  to direct users to the Lead List page.

2. Prerequisite

• You must be an Administrator user to access this feature.
• Casa for Web is available only on NextGen UI. Reach out to support@leadsquared.com to get this enabled.
• To assign the homepage and launch bar to particular teams, ensure that you’ve configured the teams.

3. How It Works

1. On Casa, admins can create homepages and launch bars, and configure relevant widgets that they want the users to see.
2. The homepages and launch bars can be published and set as default or be assigned to different teams.
3. The published homepage and launcher will be visible to the user to whom they are assigned.

4. Build Your Web App Homepage

To create the homepage for your web app –

1. Navigate to Apps>Casa from your LeadSquared dashboard.
2. On the side panel, click the Web icon. Here, you’ll see a table with three columns – Teams, Homepages and Launchers.
3. On the top-right corner of the page, click Recently Modified and select All from the dropdown. All your Teams will be displayed under the Teams column.
4. Under Homepages, alongside Default or the relevant team, click Add Page.
5. On the home builder page, add the required widgets and configure them.
6. You can enable the Preview Mode to get a look at the homepage you’ve created. Once you’re done customizing your homepage, click Publish.

4.1 Set As Default or Select Teams

1. To set this homepage as default, enable Set as default.
2. To assign the homepage to specific teams, click Select Teams and then click on the relevant team. Click Publish.

4.2 View All Your Homepages

To view all the Launch Bars you’ve created –

1. On the Team Management page, click the  homepage icon.
2.  You can see all your Homepages (Published, Unpublished and Draft) here. You can create a homepage from here by clicking Create New.
3. You can select multiple homepages and delete them by clicking the  Multi-select icon and clicking the delete icon.

5. Add Heading, Description & Cover Image

Customize the LeadSquared Web App to reflect your organization’s branding. On the Homepage Builder screen, start by adding a heading, description, and cover image to the first section. Choose an appropriate heading and description to display on your homepage. For example, you could set the heading as “Welcome!”. In the description, you can mail merge user fields for a personalized experience. For instance, the description could be “Hi Phil! Gear up for today, check your KPIs” if you’ve added the user’s first name mail merge field.

When setting up the cover image, you have two options: upload an image from your organization or select a solid color from the six available options. Before uploading an image, review the Image Recommendations to ensure optimal display.

6. Progress Bar Widget

The Progress Bar widget can give the user an overview of all your completed tasks for a specific time period in a bar format. To configure the progress bar widget –

1. Enter the relevant task name that you want to track and select an icon.
2. From the Task Filters, select the Task Type and Date Range for which you want to view the progress bar for.
3. By enabling Set Thresholds, you can set minimum and maximum values to be displayed in the progress bar and define colour-coded ranges (e.g,  0-25% in red, 26-50% in yellow and 51-100% in green) using the slider. However, this is optional.
4. Once you’ve configured the widget, click Save.

7. Single Counter Widget

This widget can display the user’s tasks or the data count present in the smart views which can include accounts, leads, opportunities, activities, and tasks. Based on the team you’re assigning this homepage to, you can assign the relevant smart views tab. To configure this widget –

1. Enter the relevant widget name and select an icon.
2. Select the relevant entity.

If you’ve selected Tasks –

1. Choose the Task Type and the Status (either completed, pending or overdue).
2. Select the date range for which you want the counter to be displayed and click Save.

If you’ve selected Smart views-

1. Choose the relevant teams.
2. Under the Select Smart View section, you will only be shown the smart views that are relevant to that particular team. Select a Smart View and the corresponding Smart View Tab.
3. You can enable Set Threshold to set minimum and maximum values to be displayed in the single counter and define colour-coded ranges (e.g,  0-25 in red, 26-50 in yellow and 51-100 in green) using the slider. However, this is optional.

8. Speedometer Widget

The Speedometer Widget gives you a overview of all your completed tasks for a specific time period in the speedometer format. To configure this –

1. Under the Widget Name, enter the relevant task name that you want to track and select an icon.
2. From the Task Filters, select the Task Type and Date Range for which you want to view the speedometer for.
3. By enabling Set Thresholds, you can set minimum and maximum values to be displayed in the speedometer and define colour-coded ranges (e.g,  0-22% in red, 23-78% in yellow and 78-100% in green) using the slider. However, this is optional.
4. Once you’ve configured the widget, click Save.

9. Calendar View Widget

This widget displays your tasks – either complete, pending, overdue or pending and overdue in the Calendar view. You can either choose to view your tasks for a particular date on a timeline by switching to the Timeline view or as a list by selecting the Agenda view. To configure this –

1. Under the Widget Name, enter the relevant task name that you want to view and select an icon.
2. From the Task Filters, select the Task Type and Task Status.
3. Once you’ve configured the widget, click Save.

10. Web View Widget

The Web View widget displays a web view of the target URL within the section. You can resize the widget as required. To configure this –

1. Enter the relevant name to the widget.
2. Under Navigate To, enter the relevant Custom URL you want the user to be directed to.

11. Icon Launcher Widget

Display a maximum of 10 icons that quick launch items from the homepage. The icons and the destination they lead to can be configured. There are numerous ways you can configure these icons. For example, you can configure to direct users to the Lead List page. You can also configure an icon to navigate to a different website (like a help site). To configure this –

1. Enter the relevant name for the widget and click Add Launch Item.
2. Select an appropriate icon and add a label.
3. From the Navigate To dropdown, select the internal or external destination you want to open when the icon is clicked.
4. Click Add. To add another icon, click Add Launch Item and repeat the process.
5. Click the edit icon alongside the added icon to edit it, or to delete it.

12. Banner Widget

Add banners (a carousel view of images) on the homepage to display company announcements or navigate users to internal or external destinations. You can choose the adjust the size of your banner image by zooming. To configure this –

1. Enter a name for the banner.
2. The Show Frame toggle is enabled by default. If you do not want the frame to be visible, you can disable the toggle.
3. Click Upload to upload the banner image. Ensure that you’ve gone through the Image recommendations before you upload an image.
4. Under Navigate To, select the relevant destination you want to direct the user to. This can either be an internal destination like a form or an external link.
5. Click the edit icon if you want to replace the banner image, or the delete icon to delete the banner image.

13. Resize & Remove Widgets

13.1 Resize Widgets

Once you’ve added the widgets to the homepage, you can resize and rearrange them as required.

1. Hover over the relevant widget. You will see a blue border around it.
2. Hold the  drag and drop icon and move the mouse to change the position of the widget.
3. Hover over one of the blue dots and move the mouse to resize the widget.

13.2 Remove Widgets

If you want to remove a widget, click the relevant widget and select the delete icon. On the Delete Widget popup, click Delete.

14. Build Your Launch Bar

The Launch Bar is a movable quick-access toolbar that appears on the homepage. It can be dragged and dropped anywhere on the screen as needed. A maximum of 10 items can be configured here. The icons on the Launch Bar can be customized to quickly open internal or external destinations. The default forms of Lead, Task, Opportunity and Accounts are supported in this widget. To configure this –

1. Navigate to Apps>Casa from your LeadSquared dashboard.
2. On the side panel, click the Web icon. Here, you’ll see a table with three columns – Teams, Homepages and Launchers.
3. On the top-right corner of the page, click Recently Modified and select All from the dropdown. All your Teams will be displayed under the Teams column.

14.1 Add Launcher

1. Under Launchers, click Add Launcher.
2. On the Launcher page, click Add Launch Item.
3. Select an appropriate icon and add a label.
4. From the Navigate To dropdown, select the internal or external destination you want to open when the icon is clicked.
5. Click Add. To add another icon, click Add Launch Item and repeat the process.
6. Click alongside the added icon to edit it, or to delete it.

14.2 View All Your Launch Bars

To view all the Launch Bars you’ve created –

1. On the Team Management page, click the Launch Bar icon.
2. You can see all your Launch bars (Published, Unpublished and Draft) here. You can create a launch bar from here by clicking Create New.
3. Click the edit icon to edit a launch bar, or click to delete or unpublish it.

15. Unassign Homepage & Launch Bar

Once you’ve published your homepage and launch bar for a team, you can unassign it from the Team Management page or from the builder.

1. Hover over the relevant homepage or launch bar.
2. From the dropdown that appears, select Unassign.
3. On the Unassign popup, click Unassign.

16. Unpublish Homepage & Launch Bar

The difference between unassigning and unpublishing is that if a homepage is assigned for multiple teams and you unassign a homepage for one particular team, then the homepage will not be visible for that particular team. But when a homepage is unpublished, then it will go to the Unpublished section of the Web Homepage page and will not be visible for any team. You can unpublish it from the Team Management page or from the Web Homepages page.

16.1 Unpublish from Team Management Page

To unpublish a homepage or launch bar from the Team Management page –

1. Hover over the relevant homepage or launch bar and click .
2. From the dropdown that appears, select Unpublish.
3. On the Unpublish popup, click Unpublish.

16.2 Unpublish Homepage from the Web Homepages Page

If you want to unpublish a homepage from the Web Homepages page –

1. Click alongside the relevant homepage.
2. From the dropdown that appears, select Unpublish.
3. On the Confirm Unpublish popup, click Unpublish.

16.3 Unpublish Launch Bar from the Launchbars Page

If you want to unpublish a homepage from the Launchbars page –

1. Click alongside the relevant launch bar.
2. From the dropdown that appears, select Unpublish.
3. On the Confirm Unpublish Launcher popup, click Unpublish.

Any Questions?

Did you find the content in this article helpful? Feel free to leave doubts/questions in the comment section below. We’ll get back to you as soon as possible.