Page Comparison

...

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

language	js

<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

language	js

<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>

<style>
     .wizart-product-page {display: none!important;}
</style>

Info
.class - this is a css class of your the custom button. For example in the screenshot you want to set a custom button to , if you’d like to place the custom button in the menu, so you you’ll need to find a parent <div> for your button.the button, like in the screenshot below:

Note

In another caseAlternatively, you can use any attribute: id, class, or another any other attribute for you the button parent for button.

If you want to use id of your buttoyou’re using the button id, please use add #id instead of .class.

How it works? Click on the custom menu button and make a trigger to a real Wizart button.

Versions Compared

Old Version 3

New Version Current

Key