Anleitung zur Integration von Carposé

Mit Carposé können Sie verschiedene Fahrzeug- und Content-Module spielend leicht in Ihre Website einbinden – ganz ohne tiefgehende Programmierkenntnisse. Im Folgenden erfahren Sie Schritt für Schritt, wie Sie die JavaScript-Bibliothek von Carposé integrieren, welche Vor- und Nachteile die Einbindung im Header oder im Footer mit sich bringt und wie Sie Suchformulare, Slider und weitere redaktionelle Bausteine einfach per „Shortcode“ platzieren.

1. JavaScript-Bibliothek einbinden

Binden Sie die zentrale Carposé-Integrationsbibliothek ein, damit alle Komponenten korrekt geladen werden. Fügen Sie dazu eine der beiden folgenden Zeilen in Ihren HTML-Code ein:

                        
                            <!-- Variante A: Im <head> -->
                            <script type="text/javascript" src="https://integration.carpose.app/integration.js"></script>

                            <!-- Variante B: Kurz vor </body> -->
                            <script type="text/javascript" src="https://integration.carpose.app/integration.js"></script>

Einbindung im Header sorgt für sofortige Verfügbarkeit aller Module
Einbindung im Footer beschleunigt die Erstanzeige Ihrer Seite

2. Fahrzeugsuche per Einbettungscode einfügen

Nach dem Laden der Bibliothek können Sie Ihre Suchmaske an beliebiger Stelle platzieren. Kopieren Sie einfach den folgenden Codeblock in den HTML-Bereich:

                        
                            <div
                                data-carpose-component="car-search-form"
                                data-api-key="YOUR_API_KEY">
                            </div>

data-carpose-component="car-search-form" aktiviert das Suchformular
data-api-key="YOUR_API_KEY" stellt sicher, dass nur Ihre Fahrzeugdaten geladen werden

3. Redaktionelle Module via Shortcode einbinden

Zusätzlich zu Ihrer Fahrzeugsuche können Sie weitere Carposé-Komponenten wie Angebots-Slider, Merkliste, Mitarbeiter- oder Standortdarstellung direkt in Ihre Seiten-Inhalte einfügen. Verwenden Sie dazu entsprechende „Shortcodes“:

                        
                            <!-- Angebots-Slider -->
                            <div
                                data-carpose-component="offer-slider"
                                data-api-key="YOUR_API_KEY"
                                data-id="UUID_ANZUBINDENDER_DATENSATZ">
                            </div>

                            <!-- Mitarbeiter-Liste -->
                            <div
                                data-carpose-component="employee-list"
                                data-api-key="YOUR_API_KEY"
                                data-id="UUID_IHRER_MITARBEITERGRUPPE">
                            </div>

                            <!-- Standortkarte -->
                            <div
                                data-carpose-component="location-map"
                                data-api-key="YOUR_API_KEY"
                                data-id="UUID_IHRER_STANDORTDATENSATZ">
                            </div>

Jedes Modul wird per data-carpose-component identifiziert
data-id verweist auf den in Carposé angelegten Datensatz (UUID)
Die UUID muss nicht manuell gesetzt werden – Sie können das gesamte Snippet direkt aus der Administration kopieren
Komplette Module werden automatisch an der gewünschten Stelle gerendert

4. Weiterführende Konfiguration

Alle weiteren Einstellungen, Beispiel-CSS-Klassen und erweiterte Optionen finden Sie detailliert in unserer Dokumentation. Dort erfahren Sie, wie Sie Komponenten an dein Corporate Design anpassen und zusätzliche Parameter übergeben.

Zur Carposé-Dokumentation

5. Seite veröffentlichen und prüfen

Sobald Sie die JavaScript-Bibliothek, die Suchformular-Einbettung und alle benötigten Shortcodes eingefügt haben, gehen Sie folgendermaßen vor:

Speichern Sie Ihre Änderungen im CMS oder HTML-Template.
Rufen Sie die Seite in Ihrem Browser auf und prüfen Sie, ob die Komponenten korrekt angezeigt werden.
Überprüfen Sie die Funktionalität: Suchergebnisse filtern, Slider scrollen, 360°-Viewer öffnen etc.
Falls Styles oder Abstände angepasst werden müssen, fügen Sie eigenes CSS in Ihr Theme oder Stylesheet ein.
Testen Sie gegebenenfalls auf mobilen Geräten, um sicherzustellen, dass alles responsiv und benutzerfreundlich ist.

Herzlichen Glückwunsch – Ihre Carposé-Integration ist nun live!
Bei Fragen oder Problemen unterstützt Sie unser Support-Team selbstverständlich jederzeit.