Zum einbinden in eine Webseite einfach das jeweilige benötigte einzeln im Headtag oder vor dem schließenden Bodytag einbinden.
Google Reviews: <script src="https://webcomponents.fm-media.at/googlereviews.js"></script>
Popup: <script src="https://webcomponents.fm-media.at/popup.js"></script>
Cookiebanner: <script src="https://webcomponents.fm-media.at/cookiebanner.js"></script>
Oder du bindest mit der utils.js gleich alles auf einmal ein, hat nur etwa 6kb.
Utils: <script type="module" src="https://webcomponents.fm-media.at/utils.js"></script>
Google Reviews werden wie folgt eingebunden
<fm-googlereviews data-key="apikey" data-places-id="placesid" data-default-styling="true"></fm-googlereviews>
Ein Cookiebanner und ein Datenschutzeinstellungen Link. Bitte das Banner nur 1x auf einer Seite einbinden! Der Link kann an beliebig vielen Stellen sein.
Cookiebanner
<fm-cookiebanner data-gtm="gtmid" data-default-styling="true"></fm-cookiebanner>
Cookie Einstellungen öffnen
<fm-cookiesettings data-text="Datenschutzeinstellung"></fm-cookiesettings>
Optional kann man die Einstellungen auch via floating Cookie Icon erreichbar machen. (siehe links unten)
<div id="cookiesetting">
<fm-cookiesettings data-text='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cookie-icon lucide-cookie"><path d="M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5"/><path d="M8.5 8.5v.01"/><path d="M16 15.5v.01"/><path d="M12 12v.01"/><path d="M11 17v.01"/><path d="M7 14v.01"/></svg>'></fm-cookiesettings>
</div><styling>
#cookiesetting {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 10;
cursor: pointer;
}
</styling>
Zum Testen einfach ?testpopupan die URL anfügen. Das funktioniert nicht nur hier sondern immer.
<fm-popup id="fm-popup" data-start="2024-01-01T00:00" data-end="2050-12-31T00:00" data-active="true" data-default-styling="true">
...Dein HTML Content hier rein...
</fm-popup>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
ButtonEs gibt 2 Elemente. Einmal die Social Icons und einmal der Toggle, den man beliebig platzieren kann, aber nur einmal bitte! Der Toggle ist standardmäßig ausgeblendet und wird automatisch bei kleinen Displays angezeigt.
Social Share Icons
<fm-socials data-default-styling="true"></fm-socials>
Social Toggle Icon
<fm-socials-toggle data-default-styling="true"></fm-socials-toggle>