Articles in this section

How to Install Common Ninja's Widgets Globally On a Website

Avatar
Support Team
  • Updated
Follow

This guide covers how to install Common Ninja’s widgets globally across your website using the widgetIds parameter directly in the script tag. This installation method is especially suitable for popups, bars, floating buttons, and other over-the-canvas widgets that work effectively across multiple pages.

 

1. When to Use the widgetIds Parameter

Using the widgetIds parameter allows you to specify widget IDs directly in the script tag, which simplifies installation and makes it easy to manage widgets globally. This approach is ideal for widgets designed to appear over the main content, such as:

  • Popups
  • Notification bars
  • Floating buttons
  • Over-the-canvas widgets

2. Steps to Install Common Ninja’s Widgets Using the widgetIds Parameter

  1. Get Your Widget ID:

    • Find the unique widget ID for each Common Ninja widget you want to use. This ID is available in your Common Ninja dashboard.

  2. Insert the Script with the widgetIds Parameter:

    • To install the widget globally, add the following script tag to the <head> section of your HTML document: 
      <script src="https://cdn.commoninja.com/sdk/latest/commonninja.js?widgetIds=XXX-XXX-XXX-XXX" defer></script>
      Replace XXX-XXX-XXX-XXX with the unique widget ID(s) you retrieved from the dashboard. Separate multiple widget IDs with commas if needed: 
      <script src="https://cdn.commoninja.com/sdk/latest/commonninja.js?widgetIds=XXX-XXX-XXX-XXX,YYY-YYY-YYY-YYY" defer></script>

  3. Save and Test:

    • Save your changes and load your website. You should now see the widgets appear as expected without any additional HTML elements.

 

3. Benefits of Global Installation

By using this method:

  • Widgets load across all pages without adding extra div elements on each page.
  • Reduced setup and maintenance for widgets designed to function globally, making this method ideal for persistent, over-the-canvas widgets.


4. Troubleshooting Common Issues

If you’re not seeing the widgets as expected, check for the following:

  • Ensure that each widget ID is correctly listed in the widgetIds parameter.
  • Verify that the script is placed in the <head> section of your HTML document.
  • Make sure there are no conflicts with other scripts in your website’s code.

With these steps, you’ll have a streamlined, globally-installed setup for your Common Ninja widgets!

Related articles