Feature 3
App documentation widget
9 min
contextual documentation is embedded within your product where the user needs it most the contextual docs widget helps users read the documentation without the need 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 who want to increase product adoption and retention all you need to do is embed the html code generated under space settings > widget integration how the widget works check out the video below showing the widget in action how to implement the widget to integrate the widget, follow these steps select your space inside the editor click on the gear icon (⚙️) to get into settings go to widget integration click on the copy button, and paste the code into your index html file, or in your application code now, the widget will handle everything behind the scenes don't worry, everything is bundled and minified it's a mere 56kb download and it loads asynchronously, so your users won't feel a difference init event in the init event, for the spaceid value, you can use the spaceid or the published {spaceid} this way you can use spaces without publishing them, straight in your app use preview {spaceid} when you only want to publish a space to preview and not on your domain false true 179,165,313false unhandled content type false unhandled content type false unhandled content type unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type if you want a simple search bubble to always be present in your app, use the bubble "ask" prop 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 false true unhandled content type unhandled content type unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type supported events here is a brief description of our widget event api true unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type code samples add a function wherever you want to display the widget on your site, like this const openabwidget = () => { window archbee push({ eventtype "show widget", // optional, only for loading a specific doc // and scroll to section // docid `published ${docid}`, // blockid "tbmm9" }); } this will load the widget, with the desired space docs and users will be able to see everything straight from your app if you want to load a specific doc only, just pass docid `${docid}` to our initial object as in the example above you don't need the closewidget function, since the widget will automatically close if you press esc or click outside of it however, if you want to close the widget programatically and not rely on the built in close mechanics, you can use hide widget event type this way const closeabwidgetafterseconds = (miliseconds) => { settimeout(() => { // settimeout is for demo purposes and it is not required window archbee push({eventtype "hide widget"}); }, miliseconds); } closeabwidgetafterseconds(5000);
🤔
Have a question?
Our super-smart AI,knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.