No programming effort. Just place our code snippet on your website.
Your advantages
Easy implementation
Customize design
Does the standard design not suit you? No problem! With your own CSS code you can perfectly adapt the design to your CI.
Mobile optimized
Our widget is easy to use on both desktop and mobile devices.
Try the widget!
Test the widget with all options enabled
Trademark Widget example with "check-domains" option enabled.
Examples and code
Load widget in the page
You can load the widget directly in your page. The widget looks like the one shown above. We just changed the background image color to #f5f5f5 to make the widget stand out better.
The widget is loaded in an HTML element with the ID #tmchk-container. You can change the name as you like - the important thing is to pass it on correctly in JavaScript.
(function () {
function nrTrademarkCheckLoaded () {
window.NRTRADEMARKCHECK.create('tmchk-container');
}
// custom
window.NRTRADEMARKCHECK = {
url: "YOUR_PERSONAL_URL"
};
// widget
s.src = "https://www.trademarkly.io/tmchk-widget.js";
s.async = true;
s.onload = nrTrademarkCheckLoaded;
document.head.appendChild(s);
})();
<button class="nrTrademarkCheckWidget-action button">
Open trademark Check
</button>
<script>
(function () {
// custom
window.NRTRADEMARKCHECK = {
url: "YOUR_PERSONAL_URL"
};
// widget
const s = document.createElement('script');
s.src = "https://www.trademarkly.io/tmchk-widget.js";
s.async = true;
document.head.appendChild(s);
})();
</script>
Open widget in Popup
If you don't want to load the widget directly in your page, you can open it in a popup.
For this you need one (or more) buttons with the class .nrTrademarkCheckWidget-action. The widget will automatically search for all HTML elements with this class. The iFrame is opened in a popup.
Tip! Also in the popup you can customize the widget with your CSS rules as you like.
Test me in a popup!
onLoad listener
The widget sets a .loaded CSS class on the iFrame element. So you can use CSS animation to slowly fade in the widget.
Additionally, you can also react to this in JavaScript, e.g. to hide custom loaders. The widget sends a nameRobotTrademarkCheckWidgetLoaded POST event when it is fully loaded.
A good example is our landingpage. We hide the loader via JavaScript as soon as the widget is loaded. After that, the widget is faded in via CSS animation.
Got to the startpage
<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: url: "YOUR_PERSONAL_URL"
};
// widget
const s = document.createElement('script');
s.src = "https://www.trademarkly.io/tmchk-widget.js";
s.async = true;
s.onload = nrTrademarkCheckLoaded;
document.head.appendChild(s);
})();
</script>
Settings
You have the possibility to customize the widget. Set your own texts or adapt the design to your CI by adding your own CSS
If you have any problems, contact us. We will do our best to help you.
Own texts
Use your own texts. Title, short description, "No results", banner text, etc. are easily exchangeable. You only need to provide us with the appropriate texts.
Legal advice forwarding
Link in legal advice and trademark application banner to your website where you can advise clients.
Disable distance
The widget has a distance to all edges. You can either override this with CSS, set it as a JavaScript option, or we can set this option in your personalized widget page.
Include your own CSS file
With your own CSS file you can customize the widget almost unlimited design-wise.
Send request
Are you ready to use the Trademark Check widget on your website? Write to us! We will be happy to support you with the implementation.