In case you’re adding a Visualizer banner on your website or a button in the menu, a trigger to redirect users to the Visualizer is to be added. Please check our short instruction to see how.
Step 1. You need to add a button to a page with any URL.
Step 2. Add #visualizer in the end of the URL on button: URL#visualizer/.
Example (HTML code): <a href="wizart.ai#visualizer" class="button">Trigger on custom button</a>
Step 3. Hide your Wizart button (just add display: none; to the css file of your Wizart button). And then add the following code:
Floating button:
| Code Block |
|---|
<script>
document.addEventListener('DOMContentLoaded', function(){
...
| ||
<script type="application/javascript" src="https://d35so7k19vd0fx.cloudfront.net/production/integration/floating-button.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const floatingButton = new window.WFloatingButton({
token: "your token for wizart",
element: document.getElementsByTagName("body")[0]
});
floatingButton.render({className: 'wizart-homepage'});
$($('.class').find('a[href$="#visualizer"]')).click(function(e){
e.preventDefault();
$('.wizart-homepage').trigger('click');
});
});
</script>
<style>
.wizart-homepage {display: none!important;}
</style>
|
Entry point button:
| Code Block | ||
|---|---|---|
| ||
<script type="application/javascript" src="https://d35so7k19vd0fx.cloudfront.net/production/integration/entry-point.min.js"></script> <script> document.addEventListener("DOMContentLoaded", () => { const entryPoint = new window.WEntryPoint({ token: "your token for wizart", vendorCode: "vendor code for first apply", element: document.getElementsByTagName("body")[0] }); entryPoint.render({className: 'wizart-product-page'}); $($('.class').find('a[href$="#visualizer"]')).click(function(e){ |
...
e.preventDefault(); |
...
$('. |
...
wizart- |
...
product- |
...
page').trigger('click'); |
...
}); |
...
}); |
...
</script> |
...
| Info |
|---|
w-floating-button - a css class of the Wizart button
<style>
.wizart-product-page {display: none!important;}
</style>
|
| Info |
|---|
.class is a css class of the custom button. For example, if you’d like to place the custom button in the menu, you’ll need to find a parent <div> for the button, like in the screenshot below: |
| Note |
|---|
Alternatively, you can use any attribute: id, class, or any other attribute for the button parent. If you’re using the button id, please add #id instead of .class. |
How it works? Click on the custom menu button and make a trigger to a real Wizart button.