Stap voor stap een AI-chatbot installeren in WordPress
Een veld-voor-veld WordPress-configuratie met zwevende en inline plaatsing, exacte domeinregels, een echte testvraag en praktische cache-oplossingen.
Een AI-chatbot voor WordPress vereist meer dan alleen een geactiveerde plugin: de juiste assistent, het toegestane domein, de plaatsing en het live antwoord moeten allemaal worden gecontroleerd.
De WebChatAgent-plugin verbindt WordPress zonder dat u een themabestand hoeft te bewerken. WordPress slaat alleen de Chatbot ID op en of de zwevende widget is ingeschakeld. Uiterlijk, kennis, tools en antwoordgedrag blijven in het WebChatAgent-dashboard.
Deze handleiding gebruikt een lokale wegwerp-WordPress-site met de naam Northstar Support Demo en een Engels Light Mode WebChatAgent-testaccount. We installeren pluginversie 1.1.3, koppelen één assistent, publiceren een inline chatpagina en verifiëren het resultaat zonder een productiesite aan te raken.
Beschouw een zichtbare chatknop niet als de definitieve test. De hostnaam moet zijn toegestaan, de juiste assistent moet antwoorden en één vraag op basis van een bron moet het verwachte feit opleveren.
Privacyvriendelijke speler met tweestapsactivering
Een AI-chatbot installeren in WordPress (stap voor stap)
Installeer een AI-chatbot voor WordPress met de officiële plugin, de juiste assistant-ID, domeintoestemming, inline blok of shortcode en een echte antwoordtest.
De YouTube-speler blijft geblokkeerd totdat u op Afspelen klikt. Door het laden maakt uw browser verbinding met YouTube en kunnen technische gegevens naar Google worden verzonden.
Rechtstreeks openen op YouTubeWat u aan het einde heeft bereikt
- De officiële plugin geïnstalleerd en actief
- De exacte WordPress-hostnaam toegestaan in WebChatAgent
- De juiste Chatbot ID opgeslagen met de zwevende widget ingeschakeld
- Een inline chatpagina gemaakt met het blok of de shortcode
- Een herhaalbare controle op echte antwoorden en domeinfouten
Voordat u begint
- WordPress-beheerdersrechten
- Een WebChatAgent-chatbot met één geïndexeerde bron
- De exacte productie- en staging-hostnamen
- Een vraag op basis van een bron met een bekend verwacht antwoord
- Toestemming om WordPress-, pagebuilder- en CDN-caches te wissen
Eén ID verbindt twee locaties
WebChatAgent beheert de assistentconfiguratie. De WordPress-plugin injecteert de scripts en geeft de geselecteerde Chatbot ID door aan zwevende en inline plaatsingen.
Toegestane websites vormen de beveiligingspoort. Een correcte ID kan nog steeds een configuratiefout of geen bruikbare widget tonen als de hostnaam van de pagina ontbreekt.
01–11
Stap voor stap instellen
De officiële plugin zoeken en activeren
Controleer de naam, maker en versie van de plugin vóór activering.
Open in WordPress Admin Plugins → Add Plugin en zoek naar “WebChatAgent”. Kies AI Chatbot & Live Chat – WebChatAgent van WebChatAgent. Installeer deze vanuit de directory en kies Activate.
De gecontroleerde test gebruikte versie 1.1.3 op WordPress 7.0. Een nieuwere compatibele versie heeft de voorkeur wanneer de directory deze aanbiedt; upload geen onbekend ZIP-bestand van een externe downloadpagina.
De actieve plugin en het nieuwe menu bevestigen
WordPress meldt de activering en voegt WebChatAgent toe aan het hoofdmenu.
Ga terug naar Installed Plugins. In de rij van WebChatAgent moet Deactivate staan, niet Activate, en de groene melding van “Plugin activated” moet één keer verschijnen. Het hoofdmenu WebChatAgent aan de linkerkant is de volgende bestemming.
Als de activering mislukt, controleer dan de vereisten voor WordPress en PHP in de plugin-directory voordat u instellingen in WebChatAgent wijzigt.
De volledige Chatbot ID van de gewenste assistent kopiëren
De UUID bepaalt welke assistent in WordPress verschijnt.
Open de gewenste assistent in het Engelstalige WebChatAgent-dashboard. Gebruik Chatbot actions → Copy chatbot ID, of kopieer de UUID die wordt getoond in Widget Integration. De ID is ook het laatste deel van de dashboard-URL.
Vergelijk de naam van de assistent voordat u kopieert. Het geverifieerde voorbeeld gebruikt Northstar Support; per ongeluk een ID van een salesbot plakken kan technisch geslaagd lijken, maar levert de verkeerde antwoorden op.
Elke exacte WordPress-hostnaam toestaan
Productie-, www- en staging-hostnamen zijn afzonderlijke vermeldingen.
Open in WebChatAgent Settings en voeg de exacte hostnamen toe onder Allowed websites. Voer hostnamen in zonder `https://`, poort of paginapad, en druk na elke hostnaam op Enter.
`www.northstar-demo.example` staat bijvoorbeeld niet automatisch `support.northstar-demo.example` toe. Voeg alleen de hosts toe die de widget daadwerkelijk laden. In de test is de domeinfout van de plugin bewust nagebootst voordat de lijst met toegestane domeinen correct was ingesteld.
Het tabblad General van de WordPress-plugin openen
Er worden lokaal slechts twee waarden opgeslagen voor de zwevende widget.
Selecteer WebChatAgent in het hoofdmenu van WordPress. Het tabblad General legt uit dat WordPress de Chatbot ID en de schakelaar voor de zwevende widget opslaat. De andere tabbladen tonen alleen-lezen waarden uit het dashboard.
Vóór het verbinden toont de pagina een link om een WebChatAgent-account aan te maken of te openen en een voorbeeldweergave. Houd het WebChatAgent-dashboard open in een ander tabblad, zodat u de naam en ID van de assistent eenvoudig kunt vergelijken.
De ID plakken en de zwevende widget inschakelen
Sla één volledige UUID op zonder spaties.
Plak de gekopieerde UUID in Chatbot ID, schakel “Enable the chat widget on your site” in en kies Save Settings. De schakelaar regelt alleen de zwevende knop; inline insluitingen werken onafhankelijk.
Typ een ID niet over van een screenshot. Kopieer deze rechtstreeks en vergelijk de eerste en laatste vier tekens voordat u opslaat.
De opgeslagen status aflezen—en de foutmelding serieus nemen
Lokaal opgeslagen betekent niet geautoriseerd door WebChatAgent.
Een groene melding van “Settings saved successfully” bewijst alleen dat WordPress de waarden heeft opgeslagen. Wanneer de chatbotconfiguratie niet kan worden geladen, geeft hetzelfde scherm aan dat u Allowed Domains en Chatbot ID moet controleren.
Dit is een nuttige, gecontroleerde fout. Controleer de exacte hostnaam, het `www`- of staging-subdomein en de volledige UUID opnieuw. Sla eerst op in WebChatAgent en vernieuw daarna WordPress. Schakel de domeinbeperking niet uit om het probleem te omzeilen.
Kies Gutenberg-blok of shortcode voor inline chat
Beide hergebruiken de opgeslagen ID, tenzij er een paginaspecifieke overschrijving is ingesteld.
Open het tabblad Inline Embed. Gebruik het blok WebChatAgent Inline Chat in Gutenberg, of `[webchatagent_inline]` in de Classic Editor, een shortcode-blok, pagebuilder of tekstwidget.
Een paginaspecifieke bot is mogelijk met `[webchatagent_inline chatbot-id="OTHER_UUID"]`. Documenteer overschrijvingen zorgvuldig, omdat ze kunnen verklaren waarom de inline chat en de zwevende knop verschillende assistenten tonen.
De inline chat toevoegen aan een echte pagina
De voorbeeldpagina gebruikt een standaard Shortcode-blok.
Maak een pagina genaamd “Ask Northstar Support”, voeg het WordPress Shortcode-blok toe en plak `[webchatagent_inline]`. Zoek bij het native WebChatAgent-blok naar “WebChatAgent Inline Chat” en laat de optionele ID leeg om de General-instellingen te hergebruiken.
Zorg voor voldoende verticale ruimte rond de insluiting en controleer de tablet- en mobiele voorvertoningen van de editor voordat u publiceert.
Publiceren en de exacte test-URL noteren
Een gepubliceerde pagina biedt één herhaalbaar browserdoel.
Selecteer Publish, controleer de zichtbaarheid en URL en bevestig met Publish. Open de uiteindelijke openbare URL in een privévenster, zodat beheerderscookies en verouderde widgetstatussen een probleem niet kunnen maskeren.
Houd de pagina voor staging buiten de zoekresultaten en verwijder deze na goedkeuring. De lokale handleidingpagina bevatte uitsluitend fictieve Northstar-gegevens.
Plaatsing, assistent-identiteit en één echt antwoord verifiëren
Test de volledige bezoekerservaring, niet alleen het laden van scripts.
De gepubliceerde pagina toont de inline chat in de inhoud en de zwevende knop Open chat rechtsonder. Als u slechts één plaatsing wilt, schakelt u de zwevende optie uit of verwijdert u het inline blok.
Exacte testinvoer: “What is the internal escalation code for an urgent service incident?” Verwacht en waargenomen resultaat: `NORDSTERN-42`. Het geverifieerde kader van 1440 × 1000 toont het echte, op bronnen gebaseerde antwoord op de tijdelijke WordPress-site nadat de exacte lokale hostnaam was toegestaan.
Als de widget ontbreekt, wis dan de caches van WordPress, de pagebuilder en het CDN. Sluit `web-chat-agent.js` en, voor inline pagina's, `chat-widget-inline.js` uit van regels voor uitstellen/vertragen of het combineren van scripts, en test opnieuw in een nieuw privévenster.
Voorbeeld en resultaat
Bekijk de praktijktest en het resultaat
Elke tutorial bevat een vaste invoer, het verwachte resultaat en een transparant overzicht van wat daadwerkelijk lokaal is geverifieerd.
Praktijkvoorbeeld: De WebChatAgent AI-chatbot installeren in WordPress: complete beginnershandleiding
Dit exacte scenario is doorlopen met het tijdelijke tutorial-account.
Exacte testinvoer
Open the WordPress sample page and ask: “What is the internal escalation code for an urgent service incident?”
Verwacht resultaat
De widget laadt eenmaal, opent correct en retourneert de geïndexeerde PDF-waarde.
Wat er daadwerkelijk is geverifieerd
De tijdelijke WordPress-pagina laadde zowel de inline als de zwevende plaatsing. De echte inline widget antwoordde: “The support verification code is NORDSTERN-42.”
Tips en trucs
Maak de inrichting betrouwbaar
Test met realistische voorbeelden, leg uw startpunt vast en wijzig één instelling tegelijk. Zo worden echte verbeteringen zichtbaar.
Behandel hostnamen als exacte beveiligingsvermeldingen
Voeg productie-, www- en vereiste staging-hosts afzonderlijk toe. Verwijder tijdelijke hosts na acceptatie.
Kies het model vóór de WordPress-kwaliteitscontrole
Gebruik het snelste voordelige model dat slaagt voor dezelfde tests met bekende antwoorden en eerlijke onbekenden. WordPress verandert niets aan de modelkwaliteit.
Test opnieuw na elke bronupdate
Verwijder dubbele pagina's en verouderde PDF's, indexeer opnieuw en herhaal dezelfde evaluatievragen op de openbare WordPress-pagina.
Wanneer iets niet werkt
Problemen oplossen
Controleer status, machtigingen en testgegevens systematisch voordat u het model of de prompt aanpast.
De verwachte optie ontbreekt
Controleer het accountabonnement, de functierechten en de geselecteerde chatbot. Betaalde of bètafuncties kunnen verborgen zijn wanneer niet aan de voorwaarden is voldaan.
Het testresultaat is inconsistent
Stel het testgesprek opnieuw in, houd de invoer identiek en wijzig één instelling tegelijk zodat de oorzaak meetbaar blijft.
Klaar voor een test op productieniveau
Herhaal de antwoordtest op de homepage, één gecachte subpagina en een mobiele weergave. Bevestig de beoogde plaatsingen, het toestemmingsgedrag en de identiteit van de assistent vóór de lancering.