Hoe u Facebook-klantchat aan uw website kunt toevoegen - DeLaatbusiness
customer servcice chatbots

Hoe u Facebook-klantchat aan uw website kunt toevoegen

10 min


111
6 gratis internet marketing ebooks, klik hier voor download

Wilt u een betere manier om contact te maken met prospects en klanten?

Wist u dat Facebook Messenger het gemakkelijk maakt om een ​​live chatwidget voor klanten op uw site in te sluiten?

Met de Messenger Customer Chat-plug-in kunt u een live gesprek voeren met sitebezoekers.

In dit artikel leert u hoe u een Facebook Messenger-chatwidget voor klanten aan uw site toevoegt .

Waarom zou u de klantchat van Messenger op uw website gebruiken?

Een livechat met een klant is een klein zwevend pictogram dat meestal in de rechterbenedenhoek van een website wordt weergegeven. Net als traditionele live chatsoftware, kunt u een Messenger-plug-in voor klantenchat op uw website installeren .

Deze plug-in maakt het gemakkelijk voor websitebezoekers met een Messenger-account om een ​​live gesprek met een mens te voeren, een bericht achter te laten en te communiceren met je Messenger-bot .

Voorbeeld van een chatplug-in voor Messenger

Facebook brengt u niets in rekening voor het installeren van deze chatwidget voor klanten. Je hebt niet eens een Messenger-bot nodig. De enige vereiste is een Facebook-pagina.

Voordat we het hebben over het opzetten van een Messenger-functie voor live chatten met behulp van ManyChat en Chatfuel, laten we eerst een paar redenen bekijken waarom u een livechat op uw site zou moeten hebben.

Beheer gesprekken via de inbox van uw pagina

Alle berichten die via de Messenger-chatwidget op uw website worden verzonden, verschijnen automatisch in het Postvak IN van uw Facebook-pagina.

Facebook-pagina Inbox Messenger

U kunt ook berichten van bezoekers op uw mobiele apparaat lezen en beantwoorden via de gratis Facebook Page Manager-app, die beschikbaar is in de App Store en Google Play .

Verbeter de klantenservice

Volgens Facebook is de kans groter dat 53% van de mensen winkelt bij een bedrijf dat ze rechtstreeks een bericht kunnen sturen. Met uw traditionele livechat kunt u het chatgesprek alleen op een specifieke site voeren. Met Messenger-chat kunt u echter een gesprek op uw desktop starten en dit op een later tijdstip met Messenger op uw mobiele apparaat voortzetten.

Bied direct geautomatiseerde antwoorden

Met de Messenger Chat-widget kunnen bezoekers rechtstreeks op uw website vragen stellen en kunt u in realtime gesprekken voeren met potentiële leads .

Chatgesprek via Facebook Messenger

Als je geen ondersteuningsteam hebt dat de klok rond werkt om vragen van klanten te beantwoorden, bouw dan een Messenger-bot om je Messenger-chatwidget van stroom te voorzien en beantwoord de algemene veelgestelde vragen .

Om bezoekers te helpen omzetten in leads, kunt u mensen de mogelijkheid geven om zich te abonneren op uw Messenger of e-mailnieuwsbrief , leadmagneten te bezorgen of links naar aanvullende nuttige inhoud te bieden terwijl ze wachten op een menselijke reactie.

Messenger-plug-in voor klantchat Mari Smith

Laten we nu eens kijken hoe we een Messenger-chatfunctie voor klanten kunnen opzetten met Chatfuel en ManyChat.

# 1: Messenger-chat op uw website instellen met Chatfuel

Hoewel het niet vereist is, is het effectiever om een ​​Messenger-bot gebruikers een begroeting te laten sturen wanneer ze een livechat starten via de Messenger-chatplug-in voor klanten.

Dus laten we beginnen met het maken van deze begroeting in Chatfuel . Als je deze tool nog niet eerder hebt gebruikt, bekijk dan deze video voor details over hoe je je aanmeldt en een eenvoudige bot bouwt met Chatfuel .

Nadat u zich hebt aangemeld, klikt u op het tabblad Automatiseren . Dan klik op het + tekenom een nieuw blok te maken.

ChatFuel maakt een nieuw blok aan

Om alles overzichtelijk te houden, klikt u op de titel van het blok en geeft u het de naam ‘Live Chat’. Klik onder Een kaart toevoegen op het + -teken .

ChatFuel wijzigt de bloknaam

Klik in het pop-upvenster op Live Chat om de livechat-plug-in toe te voegen.

ChatFuel-plug-ins

Deze plug-in schakelt de kunstmatige intelligentie-functie van je bot tijdelijk uit wanneer je een live gesprek voert met een gebruiker. Elke keer dat er een nieuwe chatsessie is, ontvang je ook een pushmelding van je Messenger-bot.

Wijzig nu het standaard startbericht (“U bent begonnen met een chatsessie met onze operator”). Typ zoiets als “Welkom {{voornaam}}! Hoe kan ik u helpen?” Door accolades toe te voegen na “voornaam”, vertelt de bot om de voornaam van de gebruiker in je welkomstbericht op te nemen. Facebook zal deze informatie automatisch verstrekken, zodat u de gebruiker niet hoeft te vragen om een ​​formulier in te vullen of dit basisdetail in te vullen.

ChatFuel past welkomstbericht aan

U kunt ook de beschrijving van het startbericht en het stopbericht bekijken en wijzigen . Voor deze tutorial gaan we gewoon met de standaardinstellingen.

Klik nu op het Link-icoon bovenaan de pagina, naast de naam van het blok.

ChatFuel-koppelingspictogram

Schakel in het venster dat verschijnt de optie Link blokkeren in . Daarna voert u een ref koppeling en zorg ervoor om te onthouden wat u hebt getypt in. Vervolgens klikt u op de knop Gereed oranje .

ChatFuel Block Link-optie

Nu je het begroetingsbericht hebt gemaakt, is de volgende stap het genereren van de code voor de Messenger-chatplug-in .

Klik op het tabblad Groeien in de linkerzijbalk. Zoek op de pagina Growth Tools naar Customer Chat Plugin for Your Website en klik op Enable eronder.

ChatFuel schakelt de chatplug-in voor klanten in

Voer in het pop-upvenster de URL in van de website waarop u deze Messenger-chatplug-in wilt installeren. Daarna voert u de ref parameter u hierboven toegevoegd. Wanneer een gebruiker een livechat start met uw Messenger-chatplug-in, stuurt uw bot gebruikers dit berichtenblok met de livechat-plug-in.

ChatFuel configureert de chat-plug-in voor klanten

De code voor deze chatplug-in wordt automatisch voor je gegenereerd, dus klik op Kopiëren om deze naar je klembord te kopiëren . Je plakt deze code vervolgens in het Header-gedeelte van je WordPress-site; zie sectie # 3 hieronder voor details.

Geavanceerde hack: pas uw Messenger-chatwidget aan

Wist je dat je een paar regels aan deze code kunt toevoegen om je Messenger-chatwidget verder te verbeteren? Hier is hoe de plug-in die u zojuist heeft gemaakt eruit zal zien:

Voorbeeld van ChatFuel Messenger-chatplug-in

Door wat code toe te voegen, kunt u de chatplug-in aanpassen om:

  • Wijzig de themakleur zodat deze bij uw merk past.
  • Laat een andere begroeting zien voor mensen die zijn aangemeld bij Facebook en voor mensen die niet zijn aangemeld bij Facebook.

Om deze wijzigingen aan te brengen, plakt u de code die vanuit Chatfuel is gegenereerd in een notitieblok of teksteditor . Zoek het onderstaande codefragment in geel.

ChatFuel Messenger-code voor chatplug-ins

Voeg binnen dit fragment de drie vetgedrukte regels hieronder toe :

ChatFuel Messenger-code voor chatplug-ins

Vervang #FFFFFF door de hexadecimale code van de kleur die u voor het thema wilt gebruiken. (U kunt hexadecimale kleurcodes vinden met een tool als ColorHexa .)  Vervang “Begroetingsbericht” om de twee begroetingen te wijzigen .

Stel dat u het standaard blauwe kleurenthema van Facebook wilt wijzigen in groen en de standaardbegroeting wilt wijzigen van “Hallo! Hoe kunnen wij u helpen?” tot een oproep tot actie voor uw bedrijf. Hier is de code die u aan uw chat zou kunnen toevoegen:

ChatFuel Messenger-code voor chatplug-ins

De chatwidget ziet er nu als volgt uit:

ChatFuel Messenger-chatplug-in aanpassen

# 2: Messenger-chat op uw website instellen met ManyChat

Om een ​​Messenger live chat-functie met ManyChat in te stellen , logt u in en klikt u op het tabblad Groeihulpmiddelen in de linkerzijbalk. Als je deze tool niet eerder hebt gebruikt, bekijk dan deze video voor details over hoe je je aanmeldt en een eenvoudige bot bouwt met ManyChat.

ManyChat Growth Tools-tabblad

Vervolgens klikt u op de knop New Growth Tool aan de bovenkant van de pagina.

ManyChat New Growth Tool-knop

Klik in het venster dat naar buiten schuift op Chat met klant .

ManyChat Customer Chat-groeitool

Om alles overzichtelijk te houden, hernoem je deze groeitool naar “Live Chat” en klik je op de blauwe knop Opslaan .

ManyChat hernoemt groei-tool

Vervolgens klikt u op Bewerken om de opt-in bericht bewerken. Dit is het bericht dat gebruikers ontvangen wanneer ze op de chatwidget klikken om een ​​nieuw chatgesprek te starten.

ManyChat bewerk opt-in bericht

Wijzig de tekst van het aanmeldingsbericht in zoiets als “Hallo! Bedankt voor het langskomen. Heeft u een vraag? “

ManyChat bewerk opt-in bericht

Klik op Publiceren bovenaan de pagina en klik vervolgens op Live Chat om terug te gaan naar de groeitool.

ManyChat Publish-knop

Klik nu op de blauwe knop Volgende en bepaal waar u de chatwidget wilt weergeven . Laat deze velden leeg als u wilt dat de chatwidget op elke pagina van uw site verschijnt.

ManyChat Visibility-instellingen

Als u de kleur van de widget wilt wijzigen , voert u een hex-code in of kiest u een kleur uit het palet . Merk op hoe de chatwidget en de kleur van de berichtballon van de gebruiker veranderen in het voorbeeld aan de rechterkant.

ManyChat selecteert kleur

Met ManyChat kunt u ook het begroetingsbericht wijzigen voor gebruikers die zijn aangemeld bij Facebook en voor degenen die zijn afgemeld bij Facebook .

ManyChat-begroeting voor ingelogde gebruikers

Vervolgens kiezen of de chat-widget moeten worden weergegeven op mobiele en / of desktop. Ook selecteert u hoe de klant chat-widget moeten gedragen wanneer een persoon ziet het voor de eerste keer op uw website.

ManyChat Show op deze apparaten

Nu u klaar bent met het configureren van de wijzigingen, schakelt u uw widget van Concept naar Actief in de rechterbovenhoek van de pagina.

ManyChat activeert widget

Om de Messenger-chatwidget op uw website te installeren, klikt u op de blauwe knop JavaScript-fragment installeren .

ManyChat Installeer JavaScript-fragment knop

Voer de website-URL in waar u deze chatplug-in gaat installeren en klik op Toevoegen . Klikvervolgens op Volgende .

ManyChat autoriseert website

ManyChat genereert automatisch de code die u in uw website moet plakken. Klik op Code kopiëren naar klembord .

ManyChat Kopieer code naar klembord

# 3: Installeer de code op uw WordPress-site

Nadat je een Messenger-chatfunctie hebt ingesteld met Chatfuel of ManyChat, is de laatste stap het installeren van de code op je website. Als u WordPress gebruikt, navigeert u naar uw dashboard en klikt u op Plug-ins in het linkermenu.

WordPress invoegtoepassing voor kop- en voetteksten

Klik vervolgens op de knop Nieuw toevoegen bovenaan de pagina.

WordPress invoegtoepassing voor kop- en voetteksten

Zoek in het zoekvak naar de gratis plug-in Insert Headers and Footers .

WordPress invoegtoepassing voor kop- en voetteksten

Klik op de knop om de plug-in te installeren en klik er nogmaals op om de plug-in te activeren .

WordPress invoegtoepassing voor kop- en voetteksten

Klik in de linkerzijbalk op Instellingen en kies Kop- en voetteksten invoegen .

WordPress invoegtoepassing voor kop- en voetteksten

Plak ten slotte de Messenger-chatcode in uw scriptkop en klik op Opslaan .

WordPress invoegtoepassing voor kop- en voetteksten

Als je de pagina vernieuwt , zou je nu de Messenger-chatplug-in op je site moeten zien verschijnen.

Tip : als u Leadpages gebruikt, volgt u deze stappen om de widget in te sluiten:

  • Voeg de Leadpages-URL toe aan de lijst met geautoriseerde websites (ManyChat) of websitedomeinen (Chatfuel).
  • Plak vervolgens de HTML-code in het trackingcodevak van het kopgedeelte in Leadpages.
LeadPages Head Section-trackingcode

Andere nuttige bronnen

Chatfuel klantchat

Als je een Messenger-bot bouwt met Chatfuel, kun je de chatwidget ook snel op je WordPress-site installeren met behulp van de Chatfuel Customer Chat-plug-in .

Installeer de Facebook Customer Chat WordPress-plug-in.

Chatfuel en Master of Code (een technologiebedrijf dat Messenger-chatbots heeft gebouwd voor onder meer World Surfing League, Online News Association en andere wereldwijde merken) hebben deze plug-in ontwikkeld. U kunt deze gratis plug-in downloaden en de installatie-instructies vinden op deze WordPress-pagina .

Messenger Inbox

Om gebruikers te antwoorden die uw bedrijf een bericht hebben gestuurd, kunt u de Inbox-link op uw Facebook-pagina gebruiken of de officiële Facebook Pages Manager-appdownloaden op iOS of Android.

Gebruik het tabblad Inbox op uw Facebook-pagina om op berichten te reageren.

Als u ManyChat gebruikt, kunt u gebruikers ook antwoorden via het tabblad Live Chat . ManyChat heeft geen app, maar hun live chatpagina ziet er geweldig uit op een mobiel apparaat.

Beantwoord gebruikers vanaf het tabblad Live Chat in ManyChat.

Customer Chat Plugin Documentation

Raadpleeg de officiële Facebook-documentatie voor meer informatie over het aanpassen van de chatplug-in voor klanten (als je wat meer technisch onderlegd bent) .

Gevolgtrekking

Door bezoekers van uw website een gemakkelijke manier te bieden om met uw bedrijf te communiceren via de livechat-plug-in van Messenger, kunt u:

  • Pak eventuele zorgen over uw product of dienst snel aan.
  • Beantwoord vragen van potentiële kopers en klanten.
  • Geef bezoekers meer relevante en nuttige informatie.

Je doet dit ook op Messenger, een gratis platform dat momenteel door meer dan 1,3 miljard mensen wordt gebruikt, met meer dan 2 miljard berichten die elke maand tussen mensen en bedrijven worden verzonden.


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *