Embed In-App Help

The Viewport Help Center Widget lets you embed help from your help center anywhere in your application, website or other assets.

Help Center widget in Viewport — An example of the Help Center Widget inside the Viewport app

Embedding in-app help allows your users to find and open help content directly in the right context of your app without forcing them to navigate to your Viewport help center.

Copy and insert our widget script in order to display a simplified view of any Viewport page. Customize the view further by adjusting a range of attributes.

Please note, your Viewport site needs to be live and publicly accessible for the widget to display.

Insert the Help Center Widget Script

Including the widget script into the head section of your app’s or website’s HTML is the easiest way to install the Help Center Widget.

“Copy the following script into the <head> section of your app or website:

HTML

<script type="module">
  import { initializeHelpCenterWidget } from 'https://[Domain of live site]/__theme/js/help-center-widget.js';
  initializeHelpCenterWidget({
    url: 'https://[Viewport URL]'
  });
</script>

In line 2 of the script, complete the URL with the domain of your live site (e.g. 'https://example.scrollhelp.site/__theme/js/help-center-widget.js')
In line 4 of the script, replace the part after url: with the URL of the page you want to show in the widget. Choose
- an article page if you want to show content of a specific article directly in the embed view.
- a content source page if you want to let your users search or select from your pinned pages for further reading.
Paste the complete script into the head section of the HTML of your app or website

The script will automatically place the widget at the bottom right of your web page or application. You can refer to the attributes below for additional positioning options.

The Help Center Widget can also be initialized by placing the <help-center-widget> element manually inside the body section.

How to manually place the widget element

HTML

<!DOCTYPE html>
<html>
  <head>
    <script defer src="https://[Domain of live site]/__theme/js/help-center-widget.js"></script>
  </head>
  <body>
    <help-center-widget 
       url="https://[Domain of live site]/[Path to the content source home page]"
    ></help-center-widget>
  </body>
</html>

Change Position and Behavior of Widget Elements

You can change the position of the widget button and dialog and its behavior by setting additional attributes.

Attributes can be set directly on the <help-center-widget> element or on the options object which is passed to the initializeHelpCenterWidget() function.

<help-center-widget>	initializeHelpCenterWidget()	Type	Description
`button-position`	`buttonPosition`	`string` Allowed values `free` `bottom-left` `bottom-right` Default `bottom-right`	The position of the button on the website. `free`: The button is not positioned at all. The position can be customised with CSS. `bottom-left`: The button is at a fixed position at the bottom left corner. `bottom-right`: The button is at a fixed position at the bottom right corner.
`dialog-position`	`dialogPosition`	`string` Allowed values `left` `right` Default `left`	The position of the pop-out window relative to the button. `left`: The window is positioned at the left side of the button. `right`: The window is positioned at the right side of the button.
`open`	`open`	`boolean` Default `false`	The initial state of the window. It will be visible if `open` is set to `true`. This attribute value on `<help-center-widget>` will change whenever the user opens and closes the window.
NOT AVAILABLE	`selector`	`string` Allowed values Any valid CSS selector Default `undefined`	A CSS selector which points to an existing element inside the web page. This element will be replaced with a `<help-center-widget>` element.

Advanced Customizations

Users who are experienced with custom CSS can customize the look and feel of the widget further using CSS custom properties.

If you prefer using your own buttons and use custom dialogs, you can also implement in-app help using an iframe instead of our Help Center Widget.

Related Pages

Embed In-App Help
Use the Viewport Help Center Widget to embed help directly within your own app.
Embedding Help – Best Practices
Learn how to use Viewport’s in-app help feature properly so your users can use your content conveniently right from your application or website.