Toyota Privatleasing Widget

Integrationsvejledning til Umbraco og andre CMS-systemer. Widgetten består af to dele: et script (indlæses én gang) og en HTML-container (placeres hvor widgetten skal vises).

Sådan integreres widgetten

Widgetten kræver to ting: et <script>-tag der indlæser koden, og en <div>-container der bestemmer hvad der vises.

Trin 1

Tilføj scriptet til sidens <head>

Indsæt følgende i Umbraco's master-template under Settings → Templates → Master, inden det afsluttende </head>-tag. Scriptet skal kun indlæses én gang per side.

<script src="https://pl-widget.nmpetersen.dk/widget.js" defer></script>
Trin 2

Placer widget-containeren i en HTML-blok

Indsæt følgende HTML dér widgetten skal vises. I Umbraco bruges en Rich Text Editor eller en HTML-blok (Embed/Custom Code). Tilpas data-show for at vælge modeller.

<!-- Alle modeller -->
<div data-toyota-widget
     data-show=""
     data-endpoint="https://pl-widget.nmpetersen.dk/api/submit-lead">
</div>
Tip: Scriptet (trin 1) behøver kun at være på siden én gang — også selvom du har flere widget-containere på samme side. Du kan også placere script-tagget lige før </body> i stedet for i <head>.

Attribut-reference

Alle konfigurationer sker via data-* attributter på container-elementet.

Attribut Påkrævet Beskrivelse Eksempel
data-toyota-widget Ja Markerør — aktiverer widgetten på dette element –
data-show Ja Komma-separerede model-ID'er, eller tom for alle modeller "bz4x,yaris" eller ""
data-endpoint Ja URL til lead-API'et "https://pl-widget.nmpetersen.dk/api/submit-lead"
data-dealer Nej Forhandlernavn (standard: "Toyota Køge") "Toyota Køge"
data-phone Nej Telefonnummer til forhandler (standard: "56 63 64 00") "56 63 64 00"

Tilgængelige model-ID'er

aygo-x Toyota Aygo X (Hybrid)
yaris Toyota Yaris (Hybrid)
yaris-cross Toyota Yaris Cross (Hybrid)
bz4x Toyota bZ4X (EV)
bz4x-touring Toyota bZ4X Touring (EV)
urban-cruiser Toyota Urban Cruiser (EV)
c-hr-plus Toyota C-HR+ (EV)

Eksempel: Enkelt model (direkte konfigurator)

Springer galleriet over og går direkte til konfiguratoren for én model. Sæt data-show til et enkelt model-ID.

Live demo — bZ4X
HTML-blok

Indsæt i Umbraco

<div data-toyota-widget
     data-show="bz4x"
     data-endpoint="https://pl-widget.nmpetersen.dk/api/submit-lead">
</div>

Eksempel: Kun elbiler

Viser kun elbiler i galleriet. Angiv de ønskede model-ID'er komma-separeret i data-show.

Live demo — bZ4X, Urban Cruiser, C-HR+
HTML-blok

Indsæt i Umbraco

<div data-toyota-widget
     data-show="bz4x,urban-cruiser,c-hr-plus"
     data-endpoint="https://pl-widget.nmpetersen.dk/api/submit-lead">
</div>

Eksempel: Kun hybridbiler

Viser kun hybridmodeller. Samme princip — angiv de relevante model-ID'er.

Live demo — Aygo X, Yaris, Yaris Cross
HTML-blok

Indsæt i Umbraco

<div data-toyota-widget
     data-show="aygo-x,yaris,yaris-cross"
     data-endpoint="https://pl-widget.nmpetersen.dk/api/submit-lead">
</div>