How To Add Common Ninja’s Widgets To Wix Without Using Iframe

Wix is one of the most powerful and easy-to-use drag-and-drop website builders.
Over the last few years, its ability to create stunning websites without the need to code has made Wix one of the most popular website-building platforms.

This article will provide you with the steps to embed our app without using an iframe, thereby providing a better and more optimized method for displaying Common Ninja’s apps.

1. In your Wix account, select the project where you would like to add the app.
   
   
   
   
2. Then, click on the “Add Elements” icon, select the “Box” tag, and select a Themed Box.
   
   
   
   
   
   
3. Go to your preview, and open the developers tools, to do so, press Ctrl + Shift + J, or Cmd + Option + C if you are using Mac, or just simply right-click and choose “Inspect”.
   
   
   
   
   
   
4. Click on the “Select element” icon in the window that opened, and select the added box. 
   
   
   
   
5. After selecting the box, you should see a highlighted line in the  window, copy the id that’s   in the line above your box element like in the following example:
   
   
   
   
6. Save the copied id, go back to the Wix editor, select the box, and change the box background to transparent.
   
   
   
   

7. Use the provided script to add to the ”Custom Code” section: 

<script>
  // Add the Common Ninja SDK script to the page
  var script = document.createElement("script");
  script.src = "https://cdn.commoninja.com/sdk/latest/commonninja.js";
  script.defer = true;
  document.head.appendChild(script);
  // Add the Common Ninja widget to the page
  var cnWidgetContainer = document.createElement("div");
  cnWidgetContainer.classList.add("commonninja_component");
  cnWidgetContainer.classList.add("pid-WIDGET_ID");
  setTimeout(function() {
    var targetElm = document.querySelector(#BLOCK_ID); // Can be changed to the full page container using document.body 
    targetElm.appendChild(cnWidgetContainer);

    if (typeof CommonNinja !== 'undefined') {
      CommonNinja.init();
    }
  }, 2500);
</script>

• BLOCK_ID : the box id you copied
• WIDGET_ID : the id of your common ninja’s widget.
  To learn how to get your widget id click here.
  

8. Using our example, the code we will add is:
   

   <script>
     var targetElm = document.querySelector(#comp-li9vfawr); // Can be changed to the full page container using document.body 
     // Add the Common Ninja SDK script to the page
     var script = document.createElement("script");
     script.src = "https://cdn.commoninja.com/sdk/latest/commonninja.js";
     script.defer = true;
     document.head.appendChild(script);
     // Add the Common Ninja widget to the page
     var cnWidgetContainer = document.createElement("div");
     cnWidgetContainer.classList.add("commonninja_component");
     cnWidgetContainer.classList.add("pid-3d67b91e-5879-470e-b135-1878cc2b8953");
     setTimeout(function() {
       targetElm.appendChild(cnWidgetContainer);
   
       if (typeof CommonNinja !== 'undefined') {
         CommonNinja.init();
       }
     }, 2500);
   </script>

9. To add the script to the Wix custom code, navigate to your dashboard, click on the "Settings" section, scroll to the  "Advanced" section, and select the "Custom Code" option
   
   
   
   
10. Click on the “Add custom Code” button, paste the code in the popup that opens, and click on the “Apply” button.
    
    
    
    

And that’s it!

Navigate to your preview/live page and you’ll see the widget.