Sovelluksen dokumentointiwidget – React

4 min

Olemme jo selittäneet joitakin Kontekstuaalisen dokumentaation edut hyödyistä edellisessä luvussa. Tämä opas toimii vaihtoehtona React- ja NextJS-sovelluksille Archbee-sovelluswidgetin integroimiseksi elegantimmalla tavalla.

Integroi sovelluswidget

Asenna meidän npm-paketti:

# npm:n kanssa
$ npm install --save @archbee/app-widget

# tai yarnin kanssa
$ yarn add @archbee/app-widget

Kun paketti on asennettu, siirry jsx/tsx-tiedostoosi ja luo komponentin instanssi:

import React from 'react';
import { ArchbeeAppWidget, AbWidgetRef } from '@archbee/app-widget'

function App() {
const widgetRef = useRef<AbWidgetRef>(null);

  return (
    <div>
        <ArchbeeAppWidget
            ref={widgetRef}
            spaceId={ /** julkaistun spacen id **/ }
            onWidgetOpen={() => { /** ... **/ }} // callback-funktio, jota kutsutaan widgetin avauduttua
            onWidgetClose={() => { /** ... **/ }} // callback-funktio, jota kutsutaan widgetin avauduttua
      >
        <button type='button' onClick={() => {
        <!-- Avaa widgetin -->
            widgetRef.current?.open();
        }}>
          Open
        </button>
        
        <button type='button' onClick={() => {
        <!-- Sulkee widgetin -->
            widgetRef.current?.close();
        }}>
          Close
        </button>
        
        <button type='button' onClick={() => {
        <!-- Hakee widgetin instanssin tarvittaessa erilaisia tapahtumien käsittelyjä varten. -->
            widgetRef.current?.instance();
        }}>
          Get widget instance
        </button>
      </ArchbeeAppWidget>
    </div>
  );
}

Voit myös tarkistaa tiedot kohdasta Väliasetukset:

Valitse Avaruus editorin sisältä.
Napsauta hammasratasikonia (⚙️) siirtyäksesi kohtaan Asetukset.
Siirry kohtaan Widget-integraatio.
Napsauta React-välilehteä ja sitten kopiointipainiketta ja liitä koodi .tsx/.jsx-tiedostoosi

Nyt widget hoitaa kaiken taustalla. Älä huoli, kaikki on paketoitu ja minifioitu. Latauskoko on vain 56 Kb ja se latautuu asynkronisesti, joten käyttäjäsi eivät huomaa eroa.

Komponentin propsit

Ominaisuus	Tyyppi	Pakollinen	Kuvaus
spaceId	merkkijono	pakollinen	Välitä haluttu id dokumentaation lataamiseksi.
docId	merkkijono	valinnainen	Dokumentti, jossa haluat avata widget-dokumentaation. Jos docId välitetään, widgetType ohitetaan, ja se avautuu asiakirjat-tilassa riippumatta välitetystä prop-arvosta.
jaettavaToken	merkkijono	valinnainen	Välitä yksityisten linkkien shareableToken dokumentaatiosi suojaamiseksi.
className	merkkijono	valinnainen	Välitä CSS-luokat div-kääreelle.
widgetType	'docs' \| 'search'	valinnainen	Oletusarvo on asiakirjat. Tämä avaa widgetin halutulla toiminnallisuudella. asiakirjat-tyyppi avaa widgetin oletustoiminnallisuudella, haku avaa hakuwidget-palkin, joka näyttää hakupalkin AI-tuella (jos se sisältyy tilaukseesi).
hideNavbar	totuusarvo	valinnainen	Se näyttää tai piilottaa widget-modalin yläreunan navigaatiopalkin. Oletuksena navigaatiopalkki on näkyvissä. Jos et halua nähdä navigaatiopalkkia, välitä sen arvoksi tosi, muussa tapauksessa jätä se pois.
latausstrategia	'eager' \| 'lazy'	valinnainen	Oletusarvo on laiska. Widgetin latauksen latausstrategiamenetelmä.
kupla	näkymätön \| kysy	valinnainen	Oletusarvo on näkymätön. Jos asetetaan arvoon kysy, näytön oikeaan alakulmaan näytetään kupla. Kun joku napsauttaa sitä, hakuwidget avautuu.
bubblePlaceholder	merkkijono	valinnainen	Paikkamerkki, joka näytetään kuplaosiossa. Jos sitä ei anneta, oletusarvo Esitä kysymys näytetään.
ankkuri	merkkijono	valinnainen	Voitte antaa luokka-, id- tai polku-arvon DOM-elementtiin, johon haluatte widgetin ankkuroituvan ja alustuvan. Widget ankkuroituu ensimmäiseen DOM:sta löytyvään elementtiin, jos samalla polulla on useita elementtejä. Annetulla säiliöllä pitäisi olla position: suhteellinen , koska widget näytetään ensimmäisen löydetyn suhteellinen vanhempi-elementin perusteella. esim.: ankkuri: "#my-container" / anchor: ".container-class"
onWidgetOpen	mitätön	valinnainen	Takaisinkutsu, jota kutsutaan widgetin avautumisen jälkeen.
onWidgetClose	mitätön	valinnainen	Takaisinkutsu, jota kutsutaan widgetin sulkeutumisen jälkeen.

Jaettavat tokenit ovat saatavilla Scaling-paketissa. Lue lisää aiheesta Julkisen käytön hallintaPublic Access Controls.

Ref-metodit

Jos viite-arvoa ei välitetä komponentille ArchbeeAppWidget, alikomponentit avaavat modaalisen ponnahdusikkunan automaattisesti napsautuksen jälkeen.

Ominaisuus	Tyyppi	Kuvaus
avaa	menetelmä	Avaa widgetin ohjelmallisesti.
sulje	menetelmä	Sulkee widgetin ohjelmallisesti.
esiintymä	menetelmä	Palauttaa widgetin instanssin.

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.