Self Service Portal Customization  

As an administrator you can customize self-service portals for your end users. You can add, delete, hide, re-arrange, restore, and re-size the widgets. You can also appropriately position or re-size the widgets by using the drag and extend / compress actions. To access this customization, go to Admin > General Settings > Advanced Portal Settings > Customization and click Customize Self-Service Portal.  

Self-service Portal Customization (Advanced) - For build 14000 or later

From version 14000 onwards, SupportCenter Plus extensively offers options to customize the contact homepage of the self-service portal according to your business needs. Customization of the contact home page includes advanced options such as panels, buttons, snippets, widgets with pre-defined or custom templates. SDAdmins can create and save multiple customized pages using advanced customizations, however, only one of the pages can be published.  

Notes:

• This is an instance-specific configuration.

• For new installations with build 14000 or newer, the advanced customization replaces the basic customization.

• For installations migrated to 14000, the existing basic customization will be accessible only if a customized home page is already configured. However, if a new page is created using advanced customization options, the existing basic customizations will be removed.

Create or Edit Pages

To customize the contact portal with advanced options,

➤ Go to Admin > General Settings > Advanced Portal Settings > Customization.

➤ Click Customize Self-Service Portal.

➤ Open the page editor using any of the below options:

➤ New page with pre-configured template: Under the All Pages tab, choose the page of your choice and click Edit on the card.

➤ New page without pre-configured template: Click Create New card to open the editor, create your own page from the scratch using various customization options.

➤ Previously saved page: Go to My Pages and choose the page of your choice and click Edit on the card.

➤ Adding a Template: Click Select Templates and select the preferred template from the list of available templates.

➤ Adding background color: Click Page Properties and choose between pre-selected colors or click to choose any color of your choice from the color gamut.

➤ Add and configure panels, buttons, lists, or snippets to the pages as needed. To learn more about the functionalities and configuration of these elements, click here.

➤ Click Save.

Note

• To save the self-service portal home page as a separate new page, go to Save and select Save as from the drop-down menu, provide a name, and click Save.

• To apply customizations to contact home page, go to Save and select the action Save & Set as Contact Home Page from the drop-down menu.

Configuring Customizable Elements

The page editor includes various customizable elements that add different functionalities and configurations to the contact home page as described below.

Panels

Panels help you add elements such as textboxes, functions, buttons, etc to the self-service portal home page. By default, the panel option enables pre-defined functions that display information such as the number of tasks, requests, status, etc. You can further customize the panel by adding the required elements to it.

Adding a panel:

➤ Click Panel on the left-side pane of the editor.

➤ Customize the alignment and color as required.

➤ Choose a panel type: No header or footer, Include header, and Include footer.

➤ Drag and drop your preferred panel to the page editor.

➤ Click Configure and customize the selected panel as described below:

To customize the displayed information, go to Display, and select the required value displayed in the tab. The values shown in the Display tab will be contextual as discussed below. For functions such as task count or request count, a non-editable field is displayed whose value is fetched based on task or request status. For search box and text box, a placeholder will be displayed.

To configure an action, go to Action, and select the action type from the drop-down. The values shown in the Action tab will be contextual depending on the element selected such as Open URL, Report an Issue, etc.

To configure the styling of the element, go to Style and choose your preferred font, color, shape, size, margin etc, depending on the element.

Note

• To add a title to the panel, click    and provide a title and click Done.

• To copy a panel, select the panel and click .

• To delete a panel, select the panel and click .

Buttons

Buttons perform configured actions when clicked. You can add buttons to an existing panel or add default buttons to a new panel and customize the panel as required.

Adding a button:

To add a button within an existing panel:

Select the panel, click Configure.

Click the icon and drag the required button to the panel.

To add a new button in a new panel:

➤ Click button on the left-side pane of the editor.

➤ Drag your preferred button to the page editor.

➤ Click Configure by selecting the required button and customize it as described below:

➤ To customize the displayed information, go to Display, and select the required value.

➤ To configure an action, go to Action, and select the action type from the drop-down. The values shown in the Action tab will be contextual depending on the element selected such as Open URL, Report an Issue etc.

➤ To configure the styling of an element, go to Style and choose your preferred button type, font, color, shape, size, margin, etc.

➤ To add more elements to the panel, click the arrow and select a preferred element amongst text, image, button, or search box and drag it to a preferred location.

➤ To resize the panel or the elements within the panel, click the edge of the panel / element and drag it to the preferred location.

➤ To arrange elements within the panel, drag the elements to the preferred location within the panel.

Notes

• To add a title to the panel, click and provide a title and click Done.

• To copy a panel, select the panel and click .

• To delete a panel, select the panel and click .

Widgets 

Add default widgets such as My Summary, Announcements, etc to the self-service portal using

Widgets. Although these widgets are non-customizable, you can add a title and adjust its dimensions as required. To add a widget, click and drag a widget to the preferred position on the page.

Notes

• To add a title to the widget, click and provide the title and click Done.

• To delete a widget, select the panel and click .

Snippets

Snippets are containers used to render external links or add HTML/Deluge scripts to create custom views.

To add a snippet,

➤ Click and drag a snippet type container to the preferred location on the page.

➤ For HTML Snippet Container: Add your code to the HTML editor and click Save.

➤ For Embed container: Add a URL using iFrame tag and configure the dimensions using Height and Width attributes.

➤ Click Done.

Notes

• To change the URL, select the snippet, click Configure, and click Change.

• To modify dimensions, select the snippet, click Configure, and change Width and Height.

• To change the alignment, select the snippet, choose your preferred option from the alignment icon.

• To add a title to the snippet, click and provide a title and click Done.

• To delete a snippet, select the panel and click .

Add multiple elements to a panel

➤ To add more elements to the panel, click and select an element type (text, image, button, or search box) and drag your preferred element to the panel.

➤ To resize the panel or the elements within the panel, click the edge of the panel/element and drag it to the required size.

➤ To arrange elements within the panel, drag the elements to the preferred location within the panel.

Manage Pages

Manage your pages from the Advanced Customization page. To access it, go to Admin > General Settings > Advanced Portal Settings > Customize Self-Service Portal and click Customize Self-Service Portal.

➤ To find a page, use the relevant keywords in the search box at the top-right.

➤ To preview a page, hover over the page and click .

Note: You can customize the preview using the toggle Show header and navigation menu.

➤ To duplicate a page, hover over the page, click   and select Duplicate.

➤ To rename a page, hover over the page, click , click Rename, provide the name, and click Save.

➤ To delete a page, hover over the preferred page, click , click Delete and confirm the action.

➤ To preview a page, hover over the page and click .