Sprachreisen.org CoursesApp
Wie binde ich die App in meine Webseite ein?
Für die Einbindung in Ihre Webseite folgen Sie einfach den drei untenstehenden Schritten:
1. Code kopieren
Kopieren Sie sich das folgende HTML-Snippet
<div id='spr-org-courses-app' data-ak-config='{ "crmApiToken": "mein-site-crm-token", "orderApiToken":"mein-order-api-token" }'></div>
<script src='https://assets.austauschkompass.de/react_app_loader/index.js'></script>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded', function() {
akLoader.init('https://assets.austauschkompass.de/spr_org_courses_app/1/build')
})
</script>
und fügen Sie es bitte zur weiteren Bearbeitung in einen Texteditor (auf Windows z.B. Notepad bzw. Editor) ein.
Wichtig: Die Bearbeitung des Snippets darf ausschließlich als Reintext erfolgen. Daher sind Textverarbeitungsprogramme wie Word bzw. Wordpad hierfür ungeeignet!
2. gewünschte Optionen anpassen
Die Einstellungen der App werden in einer einzigen Zeile (keine Umbrüche) im HTML-Attribut data-ak-config='{ "crmApiToken": "your-token-here", ... eingetragen.
Die folgenden Optionen müssen in jedem Fall erhalten bleiben, können aber vom Inhalt her angepasst werden.
Notwendige Optionen
| Name | Typ | Beschreibung |
|---|---|---|
| crmApiToken | string | notwendiger persönlicher Token für Ihre Website |
| orderApiToken | string | notwendiger persönlicher Token ihrer Website um Bestellungen zu platzieren |
Wenden sie sich an info@schueleraustausch.net um diese Zugangs-Token zu bekommen.
Optionale Optionen zur Eingrenzung der angezeigten Sprachkurse
Mit Verwendung der folgenden Filter-Optionen kann die Auswahl der gelisteten Kurse vorgefiltert werden.
| Name | Typ | Standard (Default) | Beschreibung |
|---|---|---|---|
| filter_audience | string | "Erwachsene" |
Grenzt die Zielgruppe ein. Mögliche Werte sind: "Junioren", "Jugendliche", "Erwachsene", "Best-Agers(50+)" |
| filter_countryCode | string | "GB" |
ISO 3166 Alpha-2 Country-Code, Großbuchstaben; wenn gesetzt werden nur Kurse für dieses Land gelistet. |
| filter_language | string | "Englisch" |
grenzt nach Sprache ein. Mögliche Werte sind: "Chinesisch", "Englisch", "Franzoesisch", "Griechisch", "Italienisch", "Japanisch", "Portugiesisch", "Russisch", "Spanisch", "Tuerkisch" |
| filter_type | string | "Standardkurs" |
grenzt nach Kursart ein. Mögliche Werte sind: "Standardkurs", "Intensivkurs","Business-Sprachkurs","Sprache+Freizeit","Examensvorbereitung" |
Optionale Anpassung der Darstellung
Mit Verwendung der folgenden Optionen kann die Darstellung der App für Ihre Webseite angepasst werden.
| Name | Typ | Standard (Default) | Beschreibung |
|---|---|---|---|
| narrow | boolean | false |
true passt die Gestaltung der App an einen schmaleren Inhaltsbereich an. Nützlich für Einbettungen in Unterseiten mit Sidebar |
3. Code in Zielwebseite als HTML einfügen
Der angepasste Code muss aus dem Texteditor ohne weitere Veränderungen direkt als HTML in der Zielwebseite gespeichert werden. Das erfolgt je nach Art der Pflege der Webseite unterschiedlich.
Im Falle von WordPress und dem Gutenberg-Editor, muss hierfür auf einer Seite ein neuer Block (Typ HTML) angelegt und der Code dort eingefügt werden.
Sollten Sie Änderungen an den Optionen einer bereits eingebundenen SprOrgCoursesApp vornehmen wollen, wiederholen Sie dafür einfach die hier aufgeführten Schritte mit den angepassten Optionen und ersetzen Sie den bisherigen Code-Block in Ihrer Webseite mit dem angepassten Code.
Erweiterungen
Lesen Sie wie Sie einen Schnelleinstieg in diese App für Ihrer Webseite erstellen.