Naar de hoofdinhoud
Alle collectiesNederlandse artikelenWebsite widgets (website integratie)
Integreer de Catermonkey widgets in je eigen website
Integreer de Catermonkey widgets in je eigen website

Handleiding voor de integratie van widgets op jouw website

Mariska Grendel avatar
Geschreven door Mariska Grendel
Meer dan een maand geleden bijgewerkt

Wanneer je Catermonkey integreert in je website, verander je je website in een dynamische machine. De widgets maak je als een contactformulier, offerte indicator of webshop zodat klanten gelijk een offerte kunnen aanvragen of een bestelling kunnen doen.

Bekijk de korte instructievideo, en lees eventueel verder voor meer informatie.

Vaktermen

Eerst een paar vaktermen, ter verduidelijking:

  • Code - om Catermonkey te koppelen aan je site, dient je site te worden voorzien van een stukje computer code. Dit dien je eenmalig in je site te plakken (zie "installatie instructies"). (Zie eventueel de tip helemaal onderin dit artikel)

  • Widget - zo noemen we bij Catermonkey een bestel-/aanvraagpagina die je in je website aanmaakt. Dit kan bijv. een pagina zijn voor Barbecue pakketten, een pagina voor Buffetten, of een Trouw-arrangement samenstel module, maar kan ook een contactformulier zijn. Widgets maak je in Catermonkey eenvoudig zelf op de website widgets pagina, en de bovenstaande code zorgt ervoor dat dit getoond wordt op je website op de goede plek.


Instructies

Rechtsboven in de widget klik je op de knop "Koppel aan je website".

De code vind je onder "Installatie instructies".

(De code is gepersonaliseerd op jouw account, bovenstaande code is een voorbeeld)

Kopieer en plak de code in een HTML/Codeblok in je website, op elke pagina waar je een widget wilt tonen.


Mogelijk dient je webbouwer je hier even mee te assisteren, maar als het bijvoorbeeld een Wordpress site is, of een ander CMS, zou je het ook zelf kunnen. Overleg bij twijfel even met je webmaster.


Widgets aanmaken in Catermonkey

In dit onderstaande artikel lees je de instructies hoe je een widget aanmaakt in Catermonkey.


Geavanceerde opties

De volgende opties vereisen (beperkte) kennis van CSS en kleurcodes. Je webbouwer weet hier waarschijnlijk wel raad mee, en vraag ons anders gerust! 

Indien je de look-and-feel van de shop widgets wilt aanpassen, gaat dit via CSS. Alle HTML-code in de widgets zijn voorzien van logische HTML class namen, allen beginnend met "cm-....". Inspecteer de widgets om te zien hoe deze class namen heten. Zo kun je zaken als kleuren, randen, schaduw, lettertypen regelen. 

Een iets eenvoudigere manier is om in de Catermonkey code uit te breiden, en hier een aantal instellingen te doen, zoals kleuren (zie code hieronder).
Er zijn 4 kleuren beschikbaar en 4 achtergrondkleuren beschikbaar. Indien je deze weglaat, zal Catermonkey een standaard kleurenpakket kiezen.

NB: In de toekomst zullen er wellicht opties bijkomen, dus bekijk deze pagina zo nu en dan weer eens.

    <script>
    window.catermonkeySettings = {
        "token" : "4609adeb0aaf",
        // deze opties zijn ook beschikbaar
        "color1" : "#fff",
        "color2" : "#ccc",
        "color3" : "#444",
        "color4" : "#fff",
        "bgcolor1" : "#fff",
        "bgcolor2" : "#fff",
        "bgcolor3" : "#fff",
        "bgcolor4" : "#fff"
    };
    </script>
    <div id="catermonkey-shop"></div>
    <script src="https://static.catermonkey.com/cm-shop.js" type="text/javascript"></script>


Mocht je hier nog vragen over hebben, neem gerust contact met ons op!

Met vriendelijke groet,

Het Catermonkey team 🍌

Was dit een antwoord op uw vraag?