Abreeze integreren in uw eigen website

Voordat u begint

U heeft een eigen website met een openbaar en een besloten gedeelte. U wilt hierin E-Golf4U onderdelen gaan integreren.

Let op: op dit moment bestaat Abreeze alleen uit Starttijden. Dit wordt per onderdeel uit het reguliere iframe verder uitgebreid. Op dit moment dient u dit artikel alleen te gebruiken wanneer u starttijden als een los menu onderdeel in uw website wilt implementeren. Als u gebruik maakt van de navigatie in het reguliere iframe, hoeft u niks te doen (Abreeze laadt automatisch in het reguliere iframe).

Stappen

1. Zorg dat de Single Sign On (SSO) V2.4 goed is geïmplementeerd.

2. Zorg ervoor dat onderstaande meta tag op alle pagina's waar Abreeze ingeladen wordt, aanwezig is:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">

3. Include onderstaande code op de plaats waar Abreeze ingeladen/gerenderd dient te worden:

<div id="container"></div>

4. Include de benodigde Javascript:

<script src=https://abreeze.e-golf4u.nl/statics/js/abreeze.js></script>

<script>
  var AbreezeApp = new EgAbreeze({
     container: 'container',
     environment: '<ENVIRONMENT>'
  });
</script>

<ENVIRONMENT> in het AbreezeApp object is de naam van de omgeving. Neemt u bij twijfel of vragen contact met ons op.

Wanneer u de div een andere id geeft, dient u de corresponderende id ook te wijzigen in het AbreezeApp object!

Resultaat

Abreeze is geïntegreerd in uw website. Zie hieronder een voorbeeld html pagina hoe dit qua html eruit ziet:

<!doctype html><html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <style>
        * {
            color: green;
            background-color: #96abc1;
        }

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Welkom op onze website</h1>

<div id="container"></div>

<script src="https://abreeze.e-golf4u.nl/statics/js/abreeze.js"></script>

<script>
  var AbreezeApp = new EgAbreeze({
    container: 'container',
    environment: '<ENVIRONMENT>'
  });
</script>

</body>
</html>

Artikelen in deze sectie

Opmerkingen

Artikelen in deze sectie

Verwante artikelen