Widget

Voorbeeld als Widget

Voorbeeld als button

Click hier! om te bepalen of u naar de dokter moet

Met deze widget kunt u zelf de de digitale zelf triage tool van Moet Ik Naar De Dokter integreren in uw eigen website

Hiervoor heeft u wel een toegangssleutel nodig. Om een sleutel aan te vragen kunt u contact opnemen met ons.

Voorwaarde

De widget wordt direct op uw website geintegreerd, dus niet via een iframe. Dat betekent dat de styling en layout invloed heeft op de widget. Andersom heeft de widget geen invloed op uw website.

U dient zelf zorg te dragen dat de integratie zo optimaal mogelijk is. Mocht u toch vragen hebben of advies nodig hebben neem dan contact op met ons.

De code

Volg de volgende stappen om de widget te integreren op uw website. Enig kennis van HTML en Javascript is vereist.

Stap 1; voeg de container toe.

Dit is de plek waar de widget wordt ingeladen op uw website. Kies een eigen id wanneer nodig en voeg styling inline of via uw eigen css toe.

<div id="mindd_widget_embedded" style="height:300px;"></div>

Stap 2; voeg library toe.

Dit bevat de programma code; ter informatie dit is een ReactJS UMD applicatie. Voeg deze onder aan uw pagina toe of in de <head >

<script src="https://moetiknaardedokter.azurewebsites.net/embed/index.js" type="text/javascript"></script>

Stap 3; initialiseer de applicatie.

Voeg deze code toe of integreer deze code met uw eigen javascript om de applicatie te starten.

<script type="text/javascript"> window.addEventListener('DOMContentLoaded', function() { window.mindd.init({ ApiKey: '%%UW_API_SLEUTEL_HIER%%', target: '#mindd_widget_embedded', type: 'widget', accent_color: '#16B4AD', welcome_text: { NL: '**Voordat u belt, doorloop eerst deze vragen.** \n\n Wij voorzien u direct van advies', // markdown support EN: '**Before you call, first answer our questions.** \n\n We will give you an advice' // markdown support }, open: false, modalDisplayMode: 'full', // dialog, full (default) widget_showWelcomeText: true, widget_background: 'transparent', widget_foreground: '#fff', showLanguageSelector: true, defaultLanguageCode: 'NL', getSessionSummaryUsingForm: false, startWithTriageSearch: true, labels: { QuestionWhatGender: { NL: "Bent u geboren als man of vrouw?", EN: "Were you born a man or a woman?" }, QuestionWhatSearchTriage: { NL: "Van welke gezondheidsklacht heeft u het meeste last?", EN: "Which health complaint are you suffering from the most?" } }, branding: { termsOfUseUrl: "https://www.moetiknaardedokter.nl/gebruikersvoorwaarden/", //(default) layout: "top", name: "Huisartsenpost MINDD", phone_label: "0123 - 456789", phone_number: "012356789", font_family: "Montserrat" }, onWidgetOpened: function () { console.log("Widget was opened; callback"); }, onWidgetClosed: (finished) => { console.log(`Widget was closed. Was triage finished: ${finished}; callback`); }, onLanguageChanged: function (previousLanguage, newLanguage) { console.log(`Language changed from ${previousLanguage.code} to ${newLanguage.code}; callback`); } }); const el = document.getElementById("mindd_button"); el.addEventListener("minddWidgetOpened", (e) => { console.log("Widget was opened; event"); }); el.addEventListener("minddWidgetClosed", (e) => { console.log(`Widget was closed. Was triage finished: ${e.detail.finished}; event`); }); el.addEventListener("minddWidgetClosed", (e) => { console.log(`Language changed from ${e.detail.previousLanguage.code} to ${e.detail.newLanguage.code}; event`); }); }); </script>

Er moeten een aantal paramaters ingesteld worden:

ApiKey Uw eigen sleutel zoals deze aan u verstrekt is vanuit ons.
Type Het type integratie die u wil gebruiken; 'button' of 'widget' (zie ook voorbeelden op deze pagina). In het geval van van een 'button' gebruik dan volgende voorbeeld; <a href="#test" id="mindd_button" class="button"> Start triage </a> <script type="text/javascript"></script> window.addEventListener('DOMContentLoaded', function() { window.mindd.init({ ApiKey: '%%UW_API_SLEUTEL_HIER%%', target: '#mindd_button', type: 'button', accent_color: '#16B4AD', welcome_text: { NL: '**Voordat u belt, doorloop eerst deze vragen.** \n\n Wij voorzien u direct van advies', // markdown support EN: '**Before you call, first answer our questions.** \n\n We will give you an advice' // markdown support }, open: false, modalDisplayMode: 'full', // dialog, full (default) widget_showWelcomeText: true, widget_background: 'transparent', widget_foreground: '#fff', showLanguageSelector: true, defaultLanguageCode: 'NL', getSessionSummaryUsingForm: false, startWithTriageSearch: true, labels: { QuestionWhatGender: { NL: "Bent u geboren als man of vrouw?", EN: "Were you born as a man or a woman?" }, QuestionWhatSearchTriage: { NL: "Van welke gezondheidsklacht heeft u het meeste last?", EN: "Which health complaint are you suffering from the most?" } }, branding: { termsOfUseUrl: "https://www.moetiknaardedokter.nl/gebruikersvoorwaarden/", // (default) layout: "top", name: "Huisartsenpost MINDD", phone_label: "0123 - 456789", phone_number: "012356789", font_family: "Montserrat" } }); }); </script>
target De id van het element zoals u deze heeft toegevoegd in stap 1
accent_color De hex code van de kleur die u in de widget wil gebruiken. let erop dat deze voldoende contrast heeft met de achtergrond kleur.
welcome_text De tekst van de eerste zin kunt u aanpassen naar eigen inzicht. Het moet opgegven worden als object met een optie voor elke ondersteunde taal. Als een taal niet opgegeven is en wel gekozen wordt in de taalselectie wordt een standaard tekst gebruikt. Standaard is (voor nu) Hallo, ik kan u helpen met bepalen of u naar de dokter moet.

Deze optie ondersteunt Markdown opmaak. dus wanneer u het volgende invult ;**Voordat u belt, doorloop eerst deze vragen.** \n\n Wij voorzien u direct van advies dan wordt dit

<strong>Voordat u belt, doorloop eerst deze vragen.</strong> <p>Wij voorzien u direct van advies</p>

open Boolean (true/false) of de app bij laden van de pagina meteen moet openen of niet.
modalDisplayMode Een waarde die instelt of de widget start als fullscreen applicatie of als modal dialog met doorzichtige achtergrond. De waarde kunnen "dialog" of "full" zijn (standaard is "full").
widget_showWelcomeText Boolean (true/false), default true. U kunt er voor kiezen dat de widget, zodra deze nog niet geopend is de welcome_text niet toont; bijvoorbeeld wanneer u dit zelf in uw eigen website regelt.
widget_background U kunt er voor kiezen dat de widget, zodra deze nog niet geopend is een bepaalde achtergrond kleur moet hebben. Standaard is achtergrond.
widget_foreground U kunt er voor kiezen dat de widget, zodra deze nog niet is geopend een bepaalde tekstkleur heeft. Standaard is donkergrijs.
showLanguageSelector Of het taalselectie control getoond moet worden, heeft standaard waarde 'true'. Ook de taalselectie tonen in de kanaalinstellingen moet aan staan.
defaultLanguageCode De standaard taal die gebruikt wordt door de widget. Of de taalselectie getoond wordt is afhankelijk van de kanaalinstellingen.
getSessionSummaryUsingForm Aan het einde van een triage of na een contactverzoek wordt de optie geboden om het verslag te downloaden. Standaard wordt dat met JavaScript gedaan, maar als deze parameter op "true" gezet wordt dan word een form-tag gebruikt met een POST.
startWithTriageSearch Standaard start de widget met de vraag naar het geslacht van de gebruiker. Als die veld op 'true' staat is de begin vraag iets als 'Van welke klacht heeft u het meeste last?' en begint de gebruiker met zoeken naar zijn ingangsklacht.
Labels Moet ik naar de dokter zorgt ervoor dat de woorden en zinnen zo optimaal en correct mogelijk worden gebruikt. Voor sommige labels (op dit moment alleen QuestionWhatGender en QuestionWhatSearchTriage!) is het mogelijk om zelf uw eigen variatie aan te brengen bv: labels: { QuestionWhatGender: { NL: "Bent u geboren als man of vrouw?", EN: "Were you born as a man or a woman?" }, QuestionWhatSearchTriage: { NL: "Van welke gezondheidsklacht heeft u het meeste last?", EN: "Which health complaint are you suffering from the most?" } }
Branding U kunt uw eigen naam en telefoonnummer laten tonen boven in het moet-ik-naar-de-dokter venster. U kunt ook uw eigen gebruikersvoorwaarden tonen ipv de algemene van moetiknaardedokter. branding: { termsOfUseUrl: "https://www.moetiknaardedokter.nl/gebruikersvoorwaarden/", // (default) layout: "top", // null of "top" name: "Huisartsenpost MINDD", // naam van uw organisatie phone_label: "0123 - 456789", // telefoonnummer dat getoond wordt (leesbaar formaat) phone_number: "012356789", // telefoonnummer om de draaien (nodig voor als de gebruiker er op drukt), font_family: "Montserrat" // Allowed values are 'Montserrat', 'Arial', 'Verdana', 'Calibri' or 'Roboto'. When not supplied it defaults to 'Montserrat'. }
Custom styling Omdat de widget onderdeel is van andere website kan het voorkomen dat de styling van de website en de van de widget met elkaar conflicteren. CSS classnames wijzigen per release van de widget en om die reden worden er data-minddclass attributen aan element toegekend; deze blijven per release gelijk. Ze kunnen gebruikt worden om mogelijk stylings conflicten op te lossen.

De styling hooks kunnen met een attribute selector worden aangeroepen. Bijvoorbeeld: div[data-minddclass='button'] { color:black; } Ga behouden om met het gebruik van deze methoden.
Custom events De widget ondersteund drie events waarop een handler kan worden geregistreerd. Voor de events kunnen ook callbacks geregistreerd worden via configuratie bij de init aanroep.
  • Widget geopend
  • Widget gesloten; inclusief 'finished' veld die aangeeft of de triage is afgerond of niet.
  • Taalswitch; inclusief informatie wat de geselecteerde taal was en wat de nieuw geselecteerde taal is.
const el = document.getElementById("mindd_button"); el.addEventListener("minddWidgetOpened", (e) => { console.log("Widget was opened; event"); }); el.addEventListener("minddWidgetClosed", (e) => { console.log(`Widget was closed. Was triage finished: ${e.detail.finished}; event`); }); el.addEventListener("minddWidgetClosed", (e) => { console.log(`Language changed from ${e.detail.previousLanguage.code} to ${e.detail.newLanguage.code}; event`); }); onWidgetOpened: function () { console.log("Widget was opened; callback"); }, onWidgetClosed: (finished) => { console.log(`Widget was closed. Was triage finished: ${finished}; callback`); }, onLanguageChanged: function (previousLanguage, newLanguage) { console.log(`Language changed from ${previousLanguage.code} to ${newLanguage.code}; callback`); }
forceInitialStateEmpty Boolean (true/false), default false. onthoud geen persoonlijke data zoals gebroortedatum of naam in geval van doorsturen naar doctor. Zodat bij "opnieuw" en sluiten openen die velden opnieuw ingevoerd dienen te worden.