Draait je webshop op Shoper? Deze handleiding neemt alles met je door wat je nodig hebt om Smartsupp te koppelen – van de plugin-installatie met één klik tot de handmatige methode met code.
We hebben de handleiding opgedeeld in de volgende onderdelen:
De Smartsupp-plugin installeren
Ga in je Shoper-dashboard naar Add-ons en integraties > Applicaties. Scrol omlaag, zoek Smartsupp - live chat, Flow (voorheen chatbots) & video recordings en klik erop.
Klik op de knop Applicatie installeren.
Accepteer de voorwaarden van de App Store en klik daarna op Installeren.
Je ziet dan een bevestiging dat de Smartsupp-plugin is geïnstalleerd.
Smartsupp instellen
Ga na de installatie naar Add-ons en integraties > Mijn applicaties en klik op het icoon van Smartsupp.
Je kunt een nieuw Smartsupp-account aanmaken of inloggen op je bestaande account om het aan je Shoper-webshop te koppelen.
Zodra de koppeling staat, kun je met je bezoekers gaan chatten of de Smartsupp-instellingen aanpassen via de Smartsupp API. Vergeet niet je wijzigingen op te slaan.
Tip: Open na het opslaan je webshop in een nieuw tabblad en vernieuw de pagina – de Smartsupp-chatwidget zou nu zichtbaar moeten zijn.
Handmatige installatie van de code
Werkt de installatie via de plugin niet, dan kun je de Smartsupp-code handmatig als JavaScript-fragment toevoegen.
De chatcode kopiëren
Je unieke Smartsupp-chatcode vind je in het dashboard onder Instellingen > Kanalen > Livechat > Installatie > Code invoegen.
De code in Shoper plakken
Ga in Shoper naar het onderdeel voor JavaScript-fragmenten en plak je Smartsupp-code. Verwijder daarbij de tags <script> en </script> – Shoper accepteert geen HTML-tags in dit veld.
Let op: Het JavaScript-veld in Shoper kan een tekenlimiet hebben, dus houd de code zo kort mogelijk. Gebruik geen //-commentaar, want Shoper kan dat als niet-functioneel behandelen. Vernieuw je browser na het plakken om de wijzigingen te zien.
Aanpassingen via de API
Je kunt de JavaScript-API van Smartsupp gebruiken om het gedrag van de chatwidget in je Shoper-webshop aan te passen. Een paar veelgebruikte voorbeelden:
De chatwidget openen vanaf een eigen knop:
<button onclick="smartsupp('chat:open')">Chat met ons</button>
De chatwidget op bepaalde pagina's verbergen (bijvoorbeeld winkelwagen of afrekenen):
if (location.pathname.startsWith('/cart') || location.pathname.startsWith('/checkout')) { _smartsupp.hideWidget = true; }
De standaard chatknop verbergen en verborgen houden na het sluiten:
smartsupp('chat:hide'); smartsupp('on', 'chat:close', function() { smartsupp('chat:hide'); });
Let op: Het JavaScript-veld in Shoper kan een tekenlimiet hebben en ondersteunt geen //-commentaar. Houd je code kort en gebruik geen HTML-tags zoals <script>.
De plugin verwijderen
Wil je de Smartsupp-plugin verwijderen, ga dan naar Add-ons en integraties > Mijn applicaties en klik op de Smartsupp-app.
Klik op De app verwijderen.
Bevestig het verwijderen.
Let op: Smartsupp en Shoper zijn twee aparte diensten. Het verwijderen van de plugin zegt je Smartsupp-abonnement niet op. Wil je dat opzeggen, neem dan contact op met ons supportteam.
Gerelateerde bronnen:
Smartsupp installeren – volledig overzicht van alle installatiemethoden.
Google Tag Manager – alternatieve installatiemethode via GTM.
Wat is de volgende stap?
Basisinstellingen van de chatbox – pas kleuren, positie, welkomstberichten en meer aan.
Chatboxstatus – leer hoe de status van de chatwidget werkt en hoe je die beheert.
Waarom zie ik de chat niet op mijn website? – los de meest voorkomende installatieproblemen op.
Plugins downloaden – ontdek alle beschikbare platformintegraties.