Articles in this section

How to Install Common Ninja's Widgets on Neocities Websites

Avatar
Support Team
  • Updated
Follow

It’s very easy to add Common Ninja’s HTML code to a Neocities Website.

Step 1: Get Your Widget Embed Code

  1. Log in to your Common Ninja account.
  2. Navigate to the widget's editor you want to install.
  3. Click on the Publish button.
  4. Copy the JavaScript embed code provided.

 

Step 2: Add the JavaScript Code Globally

To ensure the widget is available across all pages of your Neocities site:

  1. Log in to your Neocities account.

  2. Open the editor for your website's main layout file (commonly named index.html or base.html).
    Screenshot 2024-12-01 at 12.00.33.png

  3. Paste the JavaScript code inside the head <head> tag, like this:

    <meta http-equiv="Content-Security-Policy" content="connect-src 'self' data: blob: https://cdn.commoninja.com;">
    <script src="https://cdn.commoninja.com/sdk/latest/commonninja.js" defer></script>

  4. Save and publish your changes.

This will ensure the widget script is loaded on all pages of your site.

 

 

Step 3: Use a Placeholder for Specific Widget Locations

To embed widgets only in specific areas of your site:

  1. Identify where you want the widget to appear (e.g., a specific section of a page or a dedicated page).

  2. Place the placeholder code provided by Common Ninja in your HTML file. The placeholder code might look like this:

    <div class="commonninja_component pid-XXXXXX-XXXXXX-XXXXXX-XXXXXX"></div>

  3. Save and publish your changes.

The JavaScript code will automatically recognize the placeholder and load the widget in that location.

 

 

Step 4: Preview and Test

  1. Visit your Neocities site to verify the widget is displayed correctly.
  2. Test the widget to ensure it functions as expected.

 

Tips for Best Results

  • Responsive Design: Make sure your widget fits well within the layout of your site. You can adjust widget settings in the Common Ninja dashboard.
  • SEO Considerations: Widgets are interactive but do not negatively impact your site's SEO performance.

 

Need Help?

If you have any questions or run into issues, our support team is here to help. Contact us at https://www.commoninja.com/support.

By adding Common Ninja widgets to your Neocities website, you can provide an enhanced user experience and boost engagement. Enjoy building a more interactive and functional site!

Related articles