website logo
Sign Up ➑Book a Demo
🌐Help Center
πŸ’ΌJobs
Navigate through spaces
⌘K
πŸ‘‹Archbee Documentation Portal
πŸš€GETTING STARTED
Learn the basics
How to get started
Use cases
πŸ“EDITOR
πŸ“ƒDOCUMENTS
πŸ—ƒοΈSPACES
🌎HOSTED SPACES
β˜•ORGANIZATIONS
πŸ“¦IMPORT & EXPORT
πŸ”ŒINTEGRATIONS
πŸ“₯GUIDES
πŸ”ƒPUBLIC API
Doc
➿MISC
πŸ™‹Q&A
How can i arrange and group my imported OpenAPI docs
Why the landing page template isn't publishing to production
Why I can't remove Archbee branding on Startup plan
Why is my published space blank?
Why can't i change the domain?
Docs powered byΒ archbeeΒ 

Contextual Documentation Widget

13min

This feature is available on these plans: βœ”οΈ Growing βœ”οΈ Scaling βœ”οΈ Enterprise

Contextual documentation is served in your product where the user needs it. Using the contextual docs widget helps users read the product documentation without requiring them to browse the user guide portal in another window.

You can load specific articles or the entire user guide portal, which is a must-have for companies to increase product adoption and retention.

All you need to do is embed the HTML code generated under Space Settings -> Widget integration.

How Contextual Documentation widget works

ο»Ώ

Contextual Documentation widget implementation

Here are the steps to integrate the widget:

  1. First you have to select a Space
  2. Click on the gear icon βš™οΈ for Settings
  3. Go to Widget Integration
  4. Click on the copy button and paste the code into your index.html file, or in your application code
Contextual Documentation Widget.
Contextual Documentation Widget.
ο»Ώ

Now our widget will handle everything behind the scenes. Don't worry, everything is bundled and minified. Just a 56Kb download and it loads asynchronously, so your users won't feel a difference.

Init Event

On the init event, for the collectionId value, you can use the collectionId or the PUBLISHED-{collectionId} , this way you can use Spaces without publishing them, straight in your app.

Property

Description

Required

collectionId

Pass the desired id to load your docs.

required

jwt

Pass the jwt token in order to see jwt protected docs.

optional

The JWT token is available in the Scaling plan. Read more about ο»ΏPublic Access Controls .

Show Widget Event

show-widget event triggers the action to display the widget. It also has an optional property that you can pass, to open a specific document from your initialized Spaces.

Property

Description

Required

docId

Set the doc id value in order to open a specific document.

optional

Supported Events

Here is a brief description of our Widget Event API:

Event name

Description

Required

init

This event help archbee widget boostrap required files into your app.

required

show-widget

This event will display the widget on demand.

required

hide-widget

This event will hide the widget if built in mechanics are not enough.

optional

Code Samples

Attach a function, wherever you want to display the widget like so:

JS
|
const openAbWidget = () => {
    window._archbee.push({
        eventType: "show-widget",
        // optional, only for loading a specific doc
        // docId: `${docId}`
    });
}
ο»Ώ

This will load the widget, with the desired Space docs and the user will be able to see everything straight from your app.

If you want to load only a specific doc, just pass docId: `${docId}` to our initial object as in example above.

We don't need a closeWidget function, since the widget will automatically close if you press Esc or click outside of it.

If you want to close the widget programatically, and do not rely on the built in close mechanics, you can use hide-widget event type like so:

JS
|
const closeAbWidgetAfterSeconds = (miliseconds) => {
    setTimeout(() => {
        // setTimeout is for demo purposes and it is not required...
        window._archbee.push({eventType: "hide-widget"});
    }, miliseconds);
}

closeAbWidgetAfterSeconds(5000);
ο»Ώ

ο»Ώ

Updated 31 Jan 2023
Did this page help you?
Yes
No
PREVIOUS
Publish a Space to Domain
NEXT
Feedback Analytics
Docs powered byΒ archbeeΒ 
TABLE OF CONTENTS
How Contextual Documentation widget works
Contextual Documentation widget implementation
Init Event
Show Widget Event
Supported Events
Code Samples