Extern ontsluiten

AutoWise biedt de optie voor het ontsluiten van je voorraad op je eigen niet-AutoWise website. Met dit artikel willen wij je graag uitleggen hoe de maker van je website het kan implementeren en waar rekening mee moet worden gehouden.

Het ontsluiten komt vaak voor wanneer je samenwerkt met een bedrijf waarvan jij bijvoorbeeld de Financial Lease voorraad aanbiedt. Omdat deze klant nog geen AutoWise-klant is kan je de voorraad van AutoWise ontsluiten op de website van de klant. Wij hebben het ontsluiten van de Voorraad zo gemaakt dat het geen invloed heeft op de vormgeving van de website waar je het op wilt implementeren. Dit wordt gedaan door een stukje Javascript toe te voegen aan de pagina waarna AutoWise zorg draagt voor de vertoningen van de voorraad welke bij AutoWise staat.

notitie

Stap 1 tot en met 3 kunnen worden uitgevoerd door de beheerder van de AutoWise omgeving. Stappen 4 en 5 zijn voor de website bouwer.

Om misbruik te voorkomen is dit per website instelbaar binnen AutoWise. Je vindt de instelling in het beheer-paneel onder Voorraad.

Als AutoWise gebruiker

Stap 1

[Instellingen scherm - stap 1.png]

Stap 2

[Instellingen scherm - stap 2.png]

Stap 3

Je AutoWise website-URL opvragen. Om jouw voorraad te kunnen tonen op jouw niet-AutoWise website heb je de link nodig naar jouw AutoWise website.

[Dashboard.png]

Wanneer je nu op 'Open website' klikt, zal er een nieuw tabblad openen naar jouw AutoWise website. Deze URL heeft je website bouwer nodig om jouw voorraad te kunnen tonen.

[Adresbalk.png]

Als website bouwer

Stap 4

We moeten nu twee elementen aanbrengen binnen de pagina om de voorraad goed te kunnen ontsluiten. Je hebt hiervoor de link nodig naar de AutoWise website, het script-bestand en de locatie waar wij AutoWise mogen ontsluiten.

Script element

<script src="[autowise-website]/stock/embed.js" crossorigin="anonymous" type="module"></script>
<!-- voorbeeld -->
<script src="https://01gx3dhwg5pjkfz78f3zbcne3c.eu.autowise.app/stock/embed.js" crossorigin="anonymous" type="module"></script>

AutoWise container

<div data-autowise-embed-container>  
    Bezig met laden...
</div>

Stap 5

Gefeliciteerd 🎉! Je hebt nu succesvol AutoWise ontsloten binnen je niet-AutoWise website.

Voorbeeld implementatie

bootstrap-demo.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">

    <title>Product example for Bootstrap</title>
    <link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

    <style>
        body {
            padding-top: 5rem;
        }
        .starter-template {
            padding: 3rem 1.5rem;
            text-align: center;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu" aria-labelledby="dropdown01">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

<main role="main" class="container">

    <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
    </div>

    <div data-autowise-embed-container>
        Bezig met laden...
    </div>

</main>
<script src="https://01gx3dhwg5pjkfz78f3zbcne3c.eu.autowise.app/stock/embed.js" crossorigin="anonymous" type="module"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="https://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>

Als AutoWise gebruiker​

Stap 1​

Stap 2​

Stap 3​

Als website bouwer​

Stap 4​

Stap 5​

Voorbeeld implementatie​