Wenn du Catermonkey in deine Website integrierst, verwandelst du deine Website in eine dynamische Maschine. Die Widgets kannst du als Kontaktformular, Angebotsanzeige oder Webshop gestalten, sodass Kunden sofort ein Angebot anfordern oder eine Bestellung aufgeben können.
Sehen Sie sich das kurze Anleitungsvideo an und lesen Sie gegebenenfalls weiter, um weitere Informationen zu erhalten.
Fachbegriffe
Zunächst ein paar Fachbegriffe zur Verdeutlichung:
Code – Um Catermonkey mit deiner Website zu verknüpfen, muss deine Website mit einem Stück Computercode versehen werden. Diesen musst du einmalig in deine Website einfügen (siehe „Installationsanleitung“). (Siehe gegebenenfalls den Tipp ganz unten in diesem Artikel)
Widget – so nennen wir bei Catermonkey eine Bestell-/Anfrageseite, die Sie auf Ihrer Website erstellen. Dies kann z. B. eine Seite für Grillpakete, eine Seite für Buffets oder ein Modul zur Zusammenstellung von Hochzeitsarrangements sein, aber auch ein Kontaktformular. Widgets erstellen Sie in Catermonkey ganz einfach selbst auf der Widget-Seite derWebsite, und der obige Code sorgt dafür, dass diese an der richtigen Stelle auf Ihrer Website angezeigt werden.
Anleitung
Klicken Sie oben rechts im Widget auf die Schaltfläche „Mit Ihrer Website verknüpfen“.
Den Code findest du unter „Installationsanleitung“.
(Der Code ist auf dein Konto zugeschnitten, der obige Code ist ein Beispiel)
Kopiere den Code und füge ihn in einen HTML-/Code-Block auf deiner Website ein, und zwar auf jeder Seite, auf der du ein Widget anzeigen möchtest.
Möglicherweise muss dir dein Webdesigner dabei kurz helfen, aber wenn es sich beispielsweise um eine WordPress-Seite oder ein anderes CMS handelt, könntest du es auch selbst erledigen. Sprich im Zweifelsfall kurz mit deinem Webmaster.
Widgets in Catermonkey erstellen
Im folgenden Artikel findest du eine Anleitung, wie du ein Widget in Catermonkey erstellst.
Erweiterte Optionen
Widget-Code auf Englisch oder Französisch
Es ist möglich, die Grundelemente des Widgets (Kontaktformular, Datum/Uhrzeit und Anzahl der Personen) automatisch ins Englische oder Französische übersetzen zu lassen. Dazu fügen Sie die gewünschte Sprache in den Widget-Code ein.
Für Englisch lautet der Zusatz: „lang“: „en“ (nach dem „token“ in deinem ursprünglichen 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>
Und für Französisch lautet der Zusatz: „lang“: „fr“ (nach dem „token“ in deinem ursprünglichen 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>
Farbcodes & CSS
Die folgenden Optionen erfordern (begrenzte) Kenntnisse in CSS und Farbcodes. Ihr Webentwickler weiß wahrscheinlich, wie man damit umgeht, und wenn nicht, fragen Sie uns gerne!
Wenn du das Erscheinungsbild der Shop-Widgets anpassen möchtest, geschieht dies über CSS. Der gesamte HTML-Code in den Widgets ist mit logischen HTML-Klassennamen versehen, die alle mit „cm-....“ beginnen. Untersuche die Widgets, um zu sehen, wie diese Klassennamen lauten. So kannst du Dinge wie Farben, Rahmen, Schatten und Schriftarten anpassen.
Eine etwas einfachere Methode ist es, den Catermonkey-Code zu erweitern und dort einige Einstellungen vorzunehmen, wie z. B. Farben (siehe Code unten).
Es stehen 4 Farben und 4 Hintergrundfarben zur Verfügung. Wenn du diese weglässt, wählt Catermonkey ein Standard-Farbset aus.
Hinweis: In Zukunft werden möglicherweise weitere Optionen hinzukommen, schau also ab und zu wieder auf dieser Seite vorbei.
<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>
Sollten Sie noch Fragen dazu haben, können Sie sich gerne an uns wenden!
Mit freundlichen Grüßen,
das Catermonkey-Team 🍌