When you integrate Catermonkey into your website, you turn your website into a dynamic machine. You can create widgets such as a contact form, quotation indicator or webshop so that customers can immediately request a quotation or place an order.
Watch the short instructional video and read on for more information.
Technical terms
First, a few technical terms for clarification:
Code - to link Catermonkey to your site, your site must be equipped with a piece of computer code. You only need to paste this into your site once (see "installation instructions"). (See the tip at the bottom of this article if necessary)
Widget - at Catermonkey, this is what we call an order/request page that you create on your website. This could be a page for barbecue packages, a page for buffets, or a wedding package builder module, but it could also be a contact form. You can easily create widgets yourself in Catermonkey on the website widgets page, and the above code ensures that this is displayed in the right place on your website.
Instructions
At the top right of the widget, click on the "Link to your website" button.
You will find the code under "Installation instructions".
(The code is personalised to your account; the code above is an example).
Copy and paste the code into an HTML/Code block on your website, on every page where you want to display a widget.
Your web developer may need to assist you with this, but if it is a Wordpress site or another CMS, you may be able to do it yourself. If in doubt, consult your webmaster.
Creating widgets in Catermonkey
In the article below, you can read the instructions on how to create a widget in Catermonkey.
Advanced options
Widget code in English or French
It is possible to have the basics of the widget (contact form, date/time and number of people) automatically translated into English or French. You can do this by adding the desired language to the widget code.
For English, this is the addition: "lang": "en" ( after the "token" in your original widget code)
<link href="https://static.catermonkey.com/cm-shop-style-v2.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
window.catermonkeySettings = {
"token" : "b6b0a83b29", "lang": "en"
};
</script>
<div id="catermonkey-shop"></div>
<script src="https://static.catermonkey.com/cm-shop.js" type="text/javascript"></script>
And for French, this is the addition: "lang": "fr" ( after the "token" in your original widget code)
<link href="https://static.catermonkey.com/cm-shop-style-v2.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
window.catermonkeySettings = {
"token" : "b6b0a83b29", "lang": "fr"
};
</script>
<div id="catermonkey-shop"></div>
<script src="https://static.catermonkey.com/cm-shop.js" type="text/javascript"></script>
Colour codes & CSS
The following options require (limited) knowledge of CSS and colour codes. Your web developer will probably know what to do, but feel free to ask us if you have any questions!
If you want to customise the look and feel of the shop widgets, you can do this via CSS. All HTML code in the widgets has logical HTML class names, all starting with "cm-....". Inspect the widgets to see what these class names are. This allows you to control things like colours, borders, shadows and fonts.
A slightly easier way is to expand the Catermonkey code and adjust a number of settings, such as colours (see code below).
There are four colours and four background colours available. If you omit these, Catermonkey will choose a standard colour scheme.
NB: More options may be added in the future, so check this page from time to time.
<script>
window.catermonkeySettings = {
"token" : "4609adeb0aaf",
// these options are also available
"color1" : "#fff",
"color2" : "#ccc",
"color3" : "#444",
"colour4" : "#fff",
"bgcolour1" : "#fff",
"bgcolour2" : "#fff",
"bgcolour3" : "#fff",
"bgcolour4" : "#fff"
};
</script>
<div id="catermonkey-shop"></div>
<script src="https://static.catermonkey.com/cm-shop.js" type="text/javascript"></script>
If you have any questions about this, please do not hesitate to contact us!
Kind regards,
The Catermonkey team 🍌