--- title: Toepdokumentasie-legstuk slug: toepdokumentasie-legstuk description: Leer hoe om ’n kontekstuele dokumentasie-legstuk in jou produk te integreer, sodat gebruikers toegang tot dokumentasie kan kry sonder om die toepassing te verlaat. Hierdie dokument verskaf stap-vir-stap-instruksies vir die keuse van ’n ruimte, toegang tot createdAt: 2022-01-03T10:17:23.000Z --- Kontekstuele dokumentasie is binne u produk ingebed waar die gebruiker dit die meeste benodig. Die contextual docs-widget help gebruikers om die dokumentasie te lees sonder dat hulle deur die gebruikersgids-portaal in ’n ander venster hoef te blaai. U kan spesifieke artikels of die hele gebruikersgids-portaal laai, wat ’n moet-hê is vir maatskappye wat produkgebruik en behoud wil verhoog. Al wat u hoef te doen, is om die HTML-kode wat onder **Spasie-instellings** -> **Widget-integrasie** gegenereer word, in te bed. # Hoe die widget werk Kyk na die video hieronder wat die widget in werking wys: ::embed[]{url="https://www.youtube.com/watch?v=aVFVe7wUdWA"} # Hoe om die widget te implementeer Volg hierdie stappe om die widget te integreer: ::::WorkflowBlock :::WorkflowBlockItem Kies u **Ruimte **binne die redigeerder. ::: :::WorkflowBlockItem Klik op die rat-ikoon (⚙️) om **Settings** oop te maak. ::: :::WorkflowBlockItem Gaan na **Widget integration**. ::: :::WorkflowBlockItem Klik op die kopieer-knoppie en plak die kode in u `index.html`-lêer, of in u toepassingskode. ::: :::: ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/1ODCzS1Qe9uLsuiEUilLN_widget-light.png "Kopieer toepassing-widgetkode") Nou sal die widget alles agter die skerms hanteer. Moenie bekommerd wees nie, alles is gebundel en verklein. Dit is slegs ’n aflaai van 56Kb en dit laai asinchronies, so u gebruikers sal nie ’n verskil opmerk nie. ## Init-gebeurtenis In die `init`-gebeurtenis, vir die `spaceId`-waarde, kan u die `spaceId` of die `GEPUBLISEER-{spaceId}` gebruik. Op hierdie manier kan u Spaces gebruik sonder om dit te publiseer, direk in u toepassing. Gebruik `VOORSKOU-{spaceId}` wanneer u slegs ’n space na Preview wil publiseer en nie op u domein nie. | **Eienskap** | Tipe | **Beskrywing** | **Verpligtend** | | ------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | | `spaceId` | `string` | Gee die verlangde id deur om u docs te laai. | `vereis` | | `jwt` | `string` | Gee die jwt-token deur om jwt-beskermde docs te sien. | `opsioneel` | | `deelbareToken` | `string` | Gee die shareableToken vanaf u private skakels deur om u docs te beskerm. | `opsioneel` | | `widgetType` | `'dokumente' \| 'soek'` | Die verstekwaarde is `dokumente`. Dit maak die widget oop met die verlangde gedrag. `dokumente`-tipe sal die widget oopmaak met die verstekgedrag, `soek` sal 'n search-widgetbalk oopmaak wat 'n soekbalk met AI-ondersteuning wys (indien dit by u intekening ingesluit is). | `opsioneel` | | `hideNavbar` | `boolese` | Dit wys of versteek die boonste navbar vanaf die widget-modal. By verstek is die navbar sigbaar. Indien u nie die navbar wil sien nie, gee dit deur met `waar`-waarde, anders slaan dit eenvoudig oor. | | | `laaiStrategie` | `lui` \| `gretig` | Die verstekwaarde is `lui`. Terwyl `lui`-laai die inisialisering van 'n hulpbron vertraag, inisialiseer of laai `gretig` die widget sodra die kode uitgevoer word. | `opsioneel` | | `borrel` | `onsigbaar` \| `vra` | Die verstekwaarde is `onsigbaar`. Indien dit op `vra` gestel is, sal dit ’n bubble regs onder op u skerm vertoon. Wanneer iemand daarop klik, sal die search widget oopmaak. | `opsioneel` | | `bubblePlaceholder` | `string` | Die placeholder wat in die bubble-afdeling vertoon sal word. Indien dit nie deurgegee word nie, sal ’n verstekwaarde van `Vra ’n vraag` vertoon word. | `opsioneel` | | `anker` | `string` | U kan u `klas`, `id` of `pad` aan ’n DOM-element verskaf waar u die widget wil anker en instansieer. Dit sal anker aan die eerste element wat in die DOM gevind word, indien veelvuldige elemente met dieselfde path teenwoordig is. Die verskafde houer moet `position: relative` hê aangesien die widget vertoon sal word gebaseer op die eerste **relatief** **ouer** wat gevind word. bv.,: `anker: "#my-container"` / `anker: ".container-class"` | `opsioneel` | :::hint{type="info"} As u wil hê dat 'n eenvoudige soekborrel altyd in u app teenwoordig moet wees, gebruik die `borrel: "vra"` prop. ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/e6ZB7rUpuw2yLZ7pmrQ-2_ask-widget-light.png) ::: ## Wys widget-gebeurtenis `show-widget` gebeurtenis aktiveer die aksie om die widget te vertoon. Dit het ook 'n *opsionele* eienskap wat u kan deurgee om 'n spesifieke dokument vanaf u geïnitialiseerde Spaces oop te maak. | **Eienskap** | **Beskrywing** | **Vereis** | | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `docId` | Stel die doc id-waarde om 'n spesifieke dokument oop te maak. As `docId` deurgegee word, word `widgetType` geïgnoreer; dit sal in `dokumente` modus oopmaak ongeag die prop wat deurgegee is.
**Nota:** U moet die woord PUBLISHED voor die docId byvoeg as `PUBLISHED-docId` of `VOORSKOU-spaceId`; andersins sal die widget die dokument vanaf wysigmodus oopmaak wat moontlik ongepubliseerde veranderinge het. | `opsioneel` | | `blockId` | Stel 'n sekere block id om na die verlangde afdeling in daardie dokument te rol. | `opsioneel` | ## Ondersteunde gebeurtenisse Hier is 'n kort beskrywing van ons **Widget-gebeurtenis-API**: | **Gebeurtenisnaam** | **Beskrywing** | **Vereis** | | ------------------- | ------------------------------------------------------------------------------------- | ----------- | | `init` | Hierdie gebeurtenis help die Archbee-widget om vereiste lêers in u app te bootstrap. | `vereis` | | `show-widget` | Hierdie gebeurtenis vertoon die widget op aanvraag. | `vereis` | | `hide-widget` | Hierdie gebeurtenis versteek die widget as ingeboude meganismes nie voldoende is nie. | `opsioneel` | ## Kodevoorbeelde Voeg 'n funksie by waar u ook al die widget op u webwerf wil vertoon, soos volg: ```javascript const openAbWidget = () => { window._archbee.push({ eventType: "show-widget", // optional, only for loading a specific doc // and scroll to section // docId: `PUBLISHED-${docId}`, // blockId: "TBMm9" }); } ``` Dit sal die widget laai, met die verlangde Space-dokumente, en gebruikers sal alles direk vanaf u app kan sien. As u slegs 'n spesifieke dokument wil laai, gee net ``docId: `${docId}` `` aan ons aanvanklike objek deur soos in die voorbeeld hierbo. U benodig nie die `closeWidget` funksie nie, aangesien die widget outomaties sal sluit as u `Esc` druk of buite dit klik. As u egter die widget programmaties wil sluit en nie op die ingeboude sluitmeganismes wil staatmaak nie, kan u `hide-widget` gebeurtenistipe op hierdie manier gebruik: ```javascript const closeAbWidgetAfterSeconds = (miliseconds) => { setTimeout(() => { // setTimeout is for demo purposes and it is not required... window._archbee.push({eventType: "hide-widget"}); }, miliseconds); } closeAbWidgetAfterSeconds(5000); ```