Style Settings for The Resource Center

In this article, we'll walk you through the steps to customize and enhance your Resource Center to better suit your needs and to trigger it in the right place, and at the right time as well as enabling the search functionality to be visible in the Resource Center widget.

Search

In this section, you'll configure the search functionality to specify which resources Userpilot should include in search results. Here, you can determine whether Userpilot should search through help articles from the "Help" tab, home modules from the "Home" tab, and news posts from the "News" tab. Additionally, you can customize the search text, no-result page text, and button text.

Style

Introducing the Style tab – your go-to for customizing the appearance of both the beacon and widget in the Resource Center. From colors to fonts, this tab offers easy-to-use tools to make your center stand out. Let's explore how you can enhance its look to better connect with your audience.


This tab will be split into two distinct sections: Widget and Beacon. This division aims to streamline the configuration process and enhance usability.


Widget:

  • Customize the appearance of your Resource Center widget with ease.

    Modify elements such as widget colors, type and color of the font, and minimize button settings.

    Main design
    • Primary Color - which is the color of the top header section
    • Background Color - the background color of the content section
    • t Color - the color of the widget icon

    • Carets Color - the color of the side arrows that appear in each module

      Text Settings
    • Font Family - you can add your own font as long as it is a google font
    • Font Color 
  • Note: Select the Color option to be "Manual" in order to edit the text color. 


Beacon:


The Beacon is the button your end-users will click to open the Resource Center widget. After you've created the Resource Center, you can:

  • Modify the Beacon background-color
  • Choose the Beacon type
  • Add your Beacon text
  • Modify the text color
  • Choose the position and text for the Beacon
  • Modify the beacon's color, icon, and position directly from this tab.

  • The "Corner Radius" field in the Style tab controls the roundness of the beacon's corners.

Settings tab


Resource Center Triggering

This section of the Settings tab will describe the set of options that can be used to trigger the Resource Center within your application.

These options will define how will the Resource Center widget be launched.

Options :

1. Beacon

If the user is eligible to see the Resource Center, the widget can be launched after clicking on the displayed beacon. You can specify the eligible users based on page, domain, and audience targeting as described in this article.

2. Element Click

If you would like to trigger the Resource Center when the user clicks on a specific element in your web app for the widget to be shown. Once selected, you can specify the CSS selector for the target element in Userpilot. 


There are two options when it comes to triggering the Resource Center from an element, it can either be achieved by specifying the CSS selector of the element or by selecting a Feature Tag that you previously created. So for anyone without a technical background, we got you! You can refer to this document to learn how a Feature Tag is created. 
One it's created, you can easily select it from the drop down list.

What is a CSS selector?

Elements are simply boxes on the page identified by its HTML and CSS, Userpilot identifies the element you have selected using CSS Selectors: these are used to select and target the HTML content on your web app. There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style; CSS selectors select HTML elements according to its id, class, type, attribute, etc.

You can find the HTML content and related CSS selectors are used as a particular element by simply following these steps:
1-  Right-click on the page and select "Inspect", you should see the 'Elements' tab.
2-  You can then click on the arrow icon that appears at the top left of the window and hover over the element that you would like to trigger the Resource Center from and click on it. 
3-  Right-click on the highlighted line in the elements tab and select "Copy" => Copy selector.


Now you have the CSS selector of the element! You can paste it in the Trigger settings of the Resource Center as you can see in the example below


We recommend asking your developers if you're missing information here.

3. Only Manually

There is more than way to trigger the Resource Center manually, it can be achieved using the permalink, programmatically, or via Userpilot content.

Option #1: Via Other Userpilot Content

If you would like to trigger the Resource Center from other Userpilot content such as a checklist or a flow, you can achieve this by including the permalink or the javascript code which are explained below in Option#2 and Option #3.

Option #2: Shareable Permalink

The Permalink option will allow you to trigger the Resource Center by including it in any URL. This is a great way to easily share a flow with a teammate or force a Resource Center to trigger using a link you share with users in your email onboarding sequence.

Simply copy the permalink and add it to the end of the URL. Here is an example:

Option #3: Trigger Programmatically

A JavaScript code to trigger the Resource Center is an additional option to trigger the Resource Center manually. 

Not only can this code be added in an element in your app, but it can also be added in a step of a Userpilot flow. To achieve this, click on the button action

Pro tip: Triggering the widget manually can be a great way to test if the Resource Center look & feel as expected without publishing it live to your end-users.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.