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.
Users who are experienced with custom CSS can customize the look and feel of the widget further using CSS variables.
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.
Using CSS to Customize the Help Center Widget
If you use our Help Center Widget, you can use CSS custom properties to further customize the size, spacing and position of the widget components.
Example:
help-center-widget {
--button-size: 45px;
}These are all available properties:
CSS custom property | Default value | Description |
|---|---|---|
|
| The width for the widget dialog. |
|
| The height for the widget dialog. |
|
| The space between the widget button and the left or the right edge of the browser window, depending on the |
|
| The space between the widget button and the bottom edge of the browser window. |
|
| The diameter of the widget button. |
CSS can also be used to freely position the button when the button-position attribute is set to free . Select the <help-center-widget> element and add your custom rules:
/* <help-center-widget button-position="free"></help-center-widget> */
help-center-widget {
/* Your positioning rules */
}Using iframes To Implement Custom In-App Help
Instead of using our predefined Help Center Widget, you can also choose to implement iframes into your application or website. This will give you complete freedom to define the look and feel and behavior of your in-app help and ensure a seamless integration into your existing assets.
Implement the iframe within the desired location at the position where your help article should be shown.
We recommend to implement the iframe so that it opens after a user clicks on an icon or some other visual cue.
Simplify the view with ?inAppHelp=true
By appending the query ?inAppHelp=true to the URL of your page, you can display a simplified view of your help article that is focused on the most important thing: the content.
Example of a simplified article page: https://help-cloud.k15t.com/scroll-viewport/get-started?inAppHelp=true
→ Check out a live demo
This view is ideal if you want to open help articles directly in your own app, as it ensures a distraction-free user experience as it will:
remove the pagetree, table of contents and breadcrumbs, header and footer and third-party Integrations from the page.
open links within the page in a new tab.
Hide the article title in the simplified view
To hide the title of the article, you can extend ?inAppHelp=true with the additional parameter &title=false. Insert this URL as the source for your iframe.