Embed In-App Help

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

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 Scroll help center.

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

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

The help center widget is currently only available for sites using the help center theme.

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://unpkg.com/@k15t/scroll-sites-help-center-widget@1.0.0/dist/index.js';
  initializeHelpCenterWidget({
    url: 'YOUR HELP CENTER URL'
  });
</script>

In line 4 of the script, replace the part after url: with the URL of the page you want to show in the widget.
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://unpkg.com/@k15t/scroll-sites-help-center-widget@1.0.0/dist/index.js';
    </script>
  </head>
  <body>
    <help-center-widget 
       url="YOUR HELP CENTER URL"
    ></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 customized 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

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.
Advanced In-App Help Customizations
Learn how to tailor and customize your in-app help to fit into and seamlessly integrate with your app or website.
Embed In-App Help
Use the Scroll Site’s Help Center Widget to embed help directly within your own app.