The teaser uses the Web Components API to attach to existing maklaro-guidebook-teaser tags.data-widget-id and data-widget-appearance-version are attributes used to determine the widget and layout to use.
<script src="https://maklaro-guidebook.netlify.app/main.js" async="" defer=""></script>
<maklaro-guidebook-teaser data-widget-id="" data-widget-appearance-version="large"></maklaro-guidebook-teaser>
The DOI works by checking for the existence of the mkl_doi_token and the mkl_widget_id query parameters on the script load.
<script src="https://maklaro-guidebook.netlify.app/main.js" async="" defer=""></script>
You can use renderGuidebookModal to programmatically render a modal. Of course including the script on the page is also necessary.
<script src="https://maklaro-guidebook.netlify.app/main.js" async="" defer=""></script>
<button onclick="renderGuidebookModal({"widgetId":""})">Open Modal</button>Alternatively you can use the maklaro-guidebook-modal tag and control the open state by the data-open attribute.
<maklaro-guidebook-modal data-widget-id="" data-open="true"></maklaro-guidebook-modal>
Use this snippet if you can not add an external script to your webpage for some reason. You can provide every parameter which is supported by the widget Teaser as the query parameter, but without the data- prefix.
<iframe src="https://maklaro-guidebook.netlify.app/iframe.html?widget-id=&widget-appearance-version=large" width="100%" height="100%" style="border: none;"></iframe>