Creating & Styling the Resource Center

Create your Resource Center

To begin, navigate to the Resource Center page in your Userpilot dashboard and click "Setup".

Content

The content tab is where the content of the widget is created as well, including a header title and description subtitle.

Widget Styling

Head over to the Widget tab to customize it to get a feel for how it will look.
You can edit the following settings in the Widget tab:

Main design

• Primary Color - which is the color of the top header section
• Background Color - the background color of the content section
• Icon 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. 

Button Setting

You can enable/disable the 'X' dismiss button of the Resource Center widget and select its color in case it is enabled.

Beacon Styling

The Configure tab is where you can set up the Beacon settings

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

Make sure to customize your Beacon and fine-tune it into the perfect spot right into your web app

Important: The beacon will only be displayed for eligible users based on the targeting settings.

Head over to the Content tab and select "Add a new Module" to start adding resources to your Resource Center. You can add three different modules options of your choosing:

• Userpilot Content 
  • Flow — Add a single flow that consists of a single or a sequence of steps
  • Checklist — Add a Checklist pattern that consists of a set of tasks 
• Link  — Send your end-users to external URLs such as your knowledge base
• Video  — Embed a video to provide visualized assistance
• Custom Javascript — Add your own customized JS function that can be used to access custom content such as triggering a chat widget.

Grouping Modules

You can also group to combine different modules to be listed in one section simply by clicking on the "Add Content" button then select "Create a Group"
Once you insert the title and description of the group, you will see a drop-down of all the modules that you created in the Resource Center, select one or multiple modules to include them in the same group.
This is a great way to list relevant content under one title and manage content to be structured.

Preview Resource Center

You can see any changes made to the Resource Center in the preview window in real time to make sure the Resource Center looks and behave as expected.