Maak van een gewoon antwoord iets waar mensen op kunnen tikken
Rijke berichten zijn interactieve componenten die je met een shortcode in een bericht plaatst. De persoon met wie je praat, ziet een kaart, een set knoppen of een klein formulier, vult het in en het antwoord wordt opgeslagen in het gesprek.
Een lijst met opties uitschrijven en hopen dat iemand met de juiste woorden antwoordt, zorgt voor werk voor jullie beiden. Rijke berichten geven ze iets om op te klikken, handig voor keuzes, productkaarten, contactgegevens, prijstabellen en video.
Stap voor stap
Schrijf een bericht en voeg een shortcode toe
Rijke berichten worden ingevoegd met shortcodes in de teksteditor van het paneel. Typ of plak de gewenste shortcode, bijvoorbeeld [buttons options="A,B,C"], en verstuur het bericht zoals normaal. De persoon aan de andere kant ziet de weergegeven component in plaats van de shortcode-tekst.
Vul de parameters in
Elke shortcode heeft zijn eigen parameters. Een productkaart ziet eruit als [card image="URL" header="TITEL" description="..." link="URL" link-text="Kopen" extra="€599" target="_blank"], terwijl een video [video type="youtube" id="VIDEO_ID" height="350"] is en youtube of vimeo accepteert.
Voeg de globale parameters toe als je ze nodig hebt
Elk rijk bericht accepteert ook id, title, message, success en settings. Gebruik title en message om de component te introduceren, en success voor wat er wordt getoond nadat de persoon heeft gereageerd.
Escapen van lastige tekens
Komma's, dubbele punten en aanhalingstekens hebben een betekenis in een shortcode. Escapen ze in je eigen tekst met een backslash: \, voor een komma, \: voor een dubbele punt en \" voor een aanhalingsteken. Dit overslaan is de meest voorkomende reden dat een rijk bericht in stukken wordt weergegeven.
Vertaal de tekst als je meerdere talen ondersteunt
De originele tekst van een rich message moet in het Engels zijn. Voeg de Engelse string en de vertaling toe bij Instellingen > Vertalingen > Frontend.
Maak een eigen shortcode aan als de bestaande niet volstaan.
Statische rich messages op basis van je eigen HTML maak je aan bij Instellingen > Diversen. Handige classes zijn sb-rich-btn sb-btn voor een knoplink, sb-rich-btn sb-btn-text voor een tekstlink, en sb-image om een afbeelding bij klik te laten inzoomen.
Instellingenoverzicht
| Instelling | Wat het doet |
|---|---|
| [card] | Een productkaart met een afbeelding, koptekst, beschrijving, prijs of extra tekst, en een linkknop. |
| [slider] en [slider-images] | Een set swipebare kaarten (maximaal 10 slides) of een eenvoudige afbeeldingsslider, geschreven als [slider-images images="URL,URL,URL"]. |
| [chips] | Kleine aanklikbare optiechips, geschreven als [chips options="A,B,C"]. |
| [buttons] | Een set antwoordknoppen, geschreven als [buttons options="A,B,C"]. |
| [select] | Een dropdownlijst met opties, geschreven als [select options="A,B,C"]. |
| [inputs] | Een klein formulier met tekstvelden en een verzendknop, geschreven als [inputs values="A,B,C" button="Verzend nu"]. |
| [email] | Verzamelt contactgegevens, bijvoorbeeld [email name="true" last-name="true" phone="true" phone-required="false" placeholder=""]. |
| [timetable] | Toont je openingstijden als een component in het bericht. |
| [articles] | Toont artikelen in het bericht, geschreven als [articles link="..."]. |
| [list] en [list-image] | Een platte, genummerde, tweekoloms- of afbeeldingenlijst, bijvoorbeeld [list values="A,B,- C,- D,E" numeric="true"] of [list-image values="URL:A,URL:B"]. |
| [table] | Een gegevenstabel, geschreven als [table header="A,B,C" values="A:B:C,A:B:C"]. |
| [button], [image] en [share] | Een enkele linkknop, een afbeelding via [image url="..."], of sociale deeliconen via [share fb="" tw="" li="" pi="" wa=""]. |
Om te weten
Ruwe HTML is geblokkeerd in normale berichten
Om veiligheidsredenen zijn ruwe HTML en JavaScript niet toegestaan in gewone berichten. Als je je eigen opmaak nodig hebt, maak dan een aangepast rijk bericht aan via Instellingen > Diversen.
Geneste lijstitems hebben een streepje nodig
Voeg in [list] een streepje en een spatie toe aan een item om het een subitem te maken, zoals in [list values="A,B,- C,- D,E"]. Gebruik voor een tweekolomslijst met titels dubbele punten: [list values="A:X,B:Y,C:Z"].
Knoppen kunnen een artikel openen
Een knop schrijf je als [button link="..." name="Klik hier" target="_blank" style="link"]. Om een van je artikelen te openen, gebruik je #artikel-ID als linkwaarde.
Contactgegevens verplichten op messaging-apps
Voeg required-messaging-apps="true" toe aan de [email] shortcode om ook op messaging-apps het e-mailadres of telefoonnummer te verplichten.
Opmaak en links in de editor
De editor begrijpt *vet*, __cursief__, ~doorhalen~, `code` en ```codeblok```. Links worden automatisch omgezet; om een link een naam te geven, voeg je #sb-voorbeeld toe, met spaties als dubbele streepjes.
Regelafbreking is niet de Enter-toets
Op Enter stuur je het bericht. Gebruik SHIFT+ENTER of CTRL+ENTER om een regelafbreking toe te voegen.
Veelgestelde vragen
Waar typ ik een rich message?
Wat gebeurt er met wat iemand selecteert of typt?
Mijn kaart kwam gebroken midden in een zin. Waarom?
Hoeveel slides kan een slider bevatten?
Kunnen rich messages in andere talen verschijnen?
Wat als ik een component nodig heb dat jullie niet aanbieden?
Klaar om de chaos te stoppen?
Verenig je berichten, automatiseer de herhalende vragen en zet gesprekken om in omzet — begin vandaag nog.
Aan de slag