Resource center

Prev Next

The resource center is an always-on, contextual, and personalized help widget that empowers your users to find help directly within your app.

How the resource center works

Once you have created and published your resource center, a subtle but easy-to-find help icon button appears in the corner of the page.

collapsed

When users click it, it expands to a list of customizable blocks, such as free-form messages, knowledge base search, list of flows, and custom actions:

expanded

Creating a resource center

Resource centers are created, managed, and published just like other Userflow content, such as flows and checklists:

  1. Select Resource centers in the sidebar.

  2. Click Create resource center.

  3. Enter a name and click Create resource center.

    builder

The resource center consists of a list of blocks that you can edit as needed. It comes pre-populated with some example blocks.

  1. Click a block to edit its settings (e.g. name or icon) in the right side panel that will appear. You can also delete a block there.

  2. Click Add block at the bottom to add more blocks.

  3. Click Preview to view a live preview of the resource center running inside your app.

  4. Click Publish.

You can optionally control when the resource center appears by using the Only show resource center if option. This is useful if it should not appear on certain pages, or if it should only be visible to specific users. You can also build multiple separate resource centers if you have different user types.

Block types

We support several block types, each with its own functionality.

Checklist block

We recommend always having a Checklist block in your resource center.

When the Checklist block is present, a user’s active checklist will automatically be embedded inside the resource center.

expanded-with-checklist

The checklist’s text and number of uncompleted tasks (if any) will also show in the resource center launcher:

collapsed-with-checklist

If you don’t include a Checklist block in your resource center, the checklist will work stand-alone and be displayed next to your resource center by default:

standalone-checklist

List of flows/checklists block

The List of flows/checklists block enables your users to find and start flows and checklists on demand. When users click it, it’ll show a searchable list of flows:

flows-route

If you click the block in the builder, you can edit its icon and name, and select which content items should be listed:

flows-block-settings

Note: Content items are by default not included in the resource center. You must add each individual item you want to list. This is to avoid exposing secret content inadvertently.

You can either let the list be sorted alphabetically, or switch from Sort alphabetically to Sort manually and drag and drop items to reorder.

You can optionally override the public names of items in the resource center. Go to an item’s builder, click Show advanced settings and look for Public name in resource center.

flow-settings

Knowledge base block

The Knowledge base block enables your users to search your existing knowledge base without leaving your app.

knowledge-base-route

Clicking a search result will open the article in a new tab. There’s also a link button in the top, which takes the user to your knowledge base frontpage.

We currently support searching directly in the following knowledge base providers

Public/Unauthenticated search

  • Freshdesk

  • HubSpot

  • Zendesk

Authenticated search

  • Intercom

  • Zendesk

For all other knowledge base providers or home-built docs sites, you have the following options:

  • Google Search: Provides similar results to Google.com when searching for site:yourdomain.com/path. This requires that your site is indexed by Google.

  • AI Assistant: If you’re using our AI Assistant, you can utilize its sources for searching. This requires that your assistant is trained and published. You do not have to use the assistant for AI chat, so if all you want is a knowledge base search, you can also use the assistant like this. Searching via the assistant incurs no additional cost. Using the AI assistant as a source also allows you to do an authenticated search in Salesforce knowledge bases.

Choose your Knowledge base provider and Knowledge base URL in the builder’s side panel:

knowledge-base-block-settings

Contact block

We recommend putting a Contact block at the bottom of your resource center. It’s a great way to let users know how to contact you.

contact-block

When users click the Email or Phone icon, they’ll see a page with information, for example, your email address:

email-route

When they click on the Chat icon, the resource center will close, and your live-chat provider will be activated:

intercom

Click the Contact block in the resource center builder to customize which of the Email, Phone, and Chat options should be displayed, edit the text to display, and choose your live-chat provider:

contact-block-settings

The resource center currently integrates with the following live-chat provider options:

  • Crisp

  • Freshchat

  • Help Scout

  • HubSpot

  • Intercom

  • Zendesk

For all other chat providers, you can build a custom chat connection using JavaScript.

Action block

Action blocks are ideal for any custom action you want users to perform in the resource center. It works similarly to a button in a flow. The block’s actions will be performed when a user clicks the block.

You can use an Action block to navigate the user to a page, start a specific flow/checklist, or execute custom JavaScript, which can perform any necessary task.

action-block-settings

Message block

If you want to display a free-form message, such as an announcement or a greeting, in your resource center, then the Message block is for you.

message-block-settings

Sub-page block

If you want to display a larger free-form message, such as a list of resources or an embedded video, in your resource center, then use a Sub-page block.

subpage-block-settings

When the user clicks the block, the Sub-page content will be displayed in a nested route with a Back button.

subpage-block

Announcements block

Announcements in Userflow let you update users about new features, fixes, events, and more, all within the resource center.

Read more in the Announcements guide.

AI Assistant block

AI Assistant delivers automated answers to your users’ questions within your app, leveraging your knowledge base and website, and powered by OpenAI’s GPT-4.

Read more in the AI Assistant guide.

Conditionally display a block

You can make a block appear only when a condition is true by using the Only show block setting.

A good example is if you have an Action block that (re)starts a checklist, then it’s a good idea to only make it show up if the checklist is not already active:

conditional-block-checklist

Another example is to conditionally show help articles on specific pages:

conditional-block-docs

Conditionally show the resource center

To conditionally show or hide the resource center, toggle Only show resource center if conditions. For example, this can be used if you only want to display the resource center on specific pages or in cases where particular elements are present or not present. If an element blocks the resource center, it is, however, often better to adjust the z-index of the resource center (via theme settings).only-show-rc

Global search

If your resource center has at least 1 searchable block (currently, only Knowledge base and List of flows/checklists blocks are searchable), a global search icon will appear in the top:

search-icon

Clicking it and searching will search across both flows in your Userflow account and articles in your knowledge base:

search-results

Theming

Under SettingsTheme you can customize the look of your resource center.

Use the Base colors section to quickly adjust the colors. Read more in our Themes guide.

Use the Resource center section to control which corner the resource center should appear in as well as its sizing and padding. You can also change the resource center launcher appearance, i.e. if it should have the default icon or a plain text question mark, as well as if it should show the active checklist text, the resource center launcher text or no text at all.

theming

Custom resource center launcher

If you want to render your own custom resource center launcher, for example, by adding a menu item in your own app, you can disable the default launcher and programmatically control the resource center via Userflow.js.

Refer to Resource center in the Userflow.js docs

Note that with a custom resource center launcher, you will still be able to show the number of pending checklist tasks for an embedded checklist and/or the number of new unread announcements. This is done using the getResourceCenterStateMethod.