Kein großer Programmierungsaufwand. Einfach platziere unser Code-Snippet auf deiner Website.
Deine Vorteile
Leichte Implementierung
Design anpassen
Passt dir das Standard-Design nicht? Kein Problem! Mit eigenem CSS Code kannst du das Design an dein CI perfekt anpassen.
Mobile optimiert
Unser Widget ist sowohl auf Desktop- als auch mobilen Geräten leicht zu bedienen.
Probiere das Widget aus!
Teste das Widget mit allen aktivieren Optionen
Markencheck Widget Beispiel mit aktivierter Option "Domains prüfen".
Beispiele und Code
Widget in der Seite laden
Du kannst das Widget direkt in deiner Seite laden. Das Widget sieht so aus, wie oben gezeigt. Wir haben lediglich die Hintergrundbild-Farbe auf #f5f5f5 geändert, damit das Widget besser zur Geltung kommt.
Das Widget wird in einem HTML Element mit der ID #tmchk-container geladen. Du kannst den Namen beliebig ändern - wichtig ist dann die korrekte Weitergabe in JavaScript.
(function () {
function nrTrademarkCheckLoaded () {
window.NRTRADEMARKCHECK.create('tmchk-container');
}
// custom
window.NRTRADEMARKCHECK = {
url: 'DEINE_PERSÖNLICHE_URL'
};
// widget
s.src = "https://www.trademarkly.de/tmchk-widget.js";
s.async = true;
s.onload = nrTrademarkCheckLoaded;
document.head.appendChild(s);
})();
<button class="nrTrademarkCheckWidget-action button">
Markencheck Widget öffnen
</button>
<script>
(function () {
// custom
window.NRTRADEMARKCHECK = {
url : 'DEINE_PERSÖNLICHE_URL'
};
// widget
const s = document.createElement('script');
s.src = "https://www.trademarkly.de/tmchk-widget.js";
s.async = true;
document.head.appendChild(s);
})();
</script>
Widget im Popup öffnen
Wenn du das Widget nicht direkt in deiner Seite laden möchtest, dann kannst es in einem Popup aufmachen.
Dafür brauchst du ein (oder mehrere) Buttons mit der Klasse .nrTrademarkCheckWidget-action. Das Widget sucht automatisch nach allen HTML Elementen mit dieser Klasse. Das iFrame wird in einem Popup aufgemacht.
Tipp! Auch im Popup kannst du das Widget mit deiner CSS Regeln beliebig anpassen.
Teste mich in einem Popup!
Auf onLoad reagieren
Das Widget setzt eine .loaded CSS Klasse auf das iFrame Element. Somit kannst du z.B. per CSS Animation das Widget langsam einblenden.
Zusätzlich kannst du auch in JavaScript darauf reagieren, um z.B. eigenen Loader auszublenden. Das Widget sendet ein nameRobotTrademarkCheckWidgetLoaded POST Event, wenn es komplett geladen ist.
Ein guter Beispiel ist unsere Startseite. Wir blenden den Loader per JavaScript aus, sobald das Widget geladen wird. Im Anschluss wird das Widget per CSS Animation eingeblendet.
Zur Startseite
<div id="tmchk-container" style="min-height: 400px;">
<!-- our custom loader -->
<div class="lds-ellipsis dot-loader">
<div></div><div></div><div></div><div></div>
</div>
</div>
<script>
(function () {
function nrTrademarkCheckLoaded () {
const WidgetContainer = document.querySelector('#tmchk-container');
const Loader = WidgetContainer.querySelector('.dot-loader');
window.NRTRADEMARKCHECK.create('tmchk-container');
// event listener
window.addEventListener('message', (event) => {
if (event.data.e === 'nameRobotTrademarkCheckWidgetLoaded') {
// we use "moofx" to fadeout our loader. You can use your favourite tool.
moofx(Loader).animate({
opacity: 0
}, {
duration: 250,
callback: function() {
Loader.destroy();
}
})
}
});
}
// custom
window.NRTRADEMARKCHECK = {
url: 'DEINE_PERSÖNLICHE_URL',
};
// widget
const s = document.createElement('script');
s.src = "https://www.trademarkly.de/tmchk-widget.js";
s.async = true;
s.onload = nrTrademarkCheckLoaded;
document.head.appendChild(s);
})();
</script>
Einstellungen
Du hast die Möglichkeit, das Widget zu individualisieren. Setze eigene Texe oder passe das Design deinem CI an, indem du eigene CSS Datei mitgibst.
Wenn du Probleme hast, kontaktiere uns. Wir werden uns bemühen dir zu helfen.
Eigene Texte
Verwende deine eigene Texte. Titel, Kurzbeschreibung, "Keine Ergebnisse", Banner-Text, usw. sind leicht autauschbar. Du musst nur uns die passenden Texte liefern.
Rechtsberatung Weiterleitung
Verlinke in Rechtsanwalt Beratung- und Markenanmeldung-Banner auf eigene Website, wo du die Kunden beraten kannst.
Abstand deaktivieren
Das Widget hat einen Abstand zu allen Rändern. Diesen könnst du entweder per CSS überschreiben, als JavaScript Option setzen oder wir stellen diese Option in deiner personalisierten Widget-Seite ein.
Eigene CSS-Datei einbinden
Mit eigener CSS-Datei kannst du das Widget fast unbegrenzt designmässig anpassen.
Anfrage senden
Du bist bereit das Markencheck Widget auf deiner Website einzusetzen? Schreibe uns an! Wir unterstützen dich gerne bei der Implementierung.