Embed In-App Help

Scroll Viewport reaches end of life on September 30, 2026.

Updating Viewport sites is no longer possible - the Update site option has been disabled. To keep making changes to your documentation, upgrade your sites to Scroll Sites. Your live sites keep running in the meantime.

Learn how to upgrade → · See the timeline →

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.

Upgrading to Scroll Sites? This widget is part of the Scroll Viewport theme and loads from your site's own domain. When you complete the upgrade, your domain switches to the new Scroll Sites site and the script URL below stops working - the widget will disappear from your product with no error message.

Replace the widget before you complete the upgrade. See Embed In-App Help for the Scroll Sites version.

Two things to check first: the Scroll Sites widget requires the Help Center theme, and it loads from a third-party CDN (unpkg.com) rather than your own domain. If you can't allow external requests, install the widget yourself instead.

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 type="module">
      import '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>

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.

Embed In-App Help
Use the Scroll Site’s Help Center Widget to embed help directly within your own app.
Embedding Help – Best Practices
Learn how to use Scroll Site’s in-app help feature properly so your users can use the content on your help center site conveniently right from your application or website.
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.
Advanced In-App Help Customizations
Learn how to install, tailor and customize your in-app help to fit into and seamlessly integrate with your app or website.
Embed In-App Help

Last updated: August 28, 2026

Insert the Help Center Widget Script

Change Position and Behavior of Widget Elements

Advanced Customizations

Insert the Help Center Widget Script

Change Position and Behavior of Widget Elements

Advanced Customizations

Related Pages