<p>Loads a simple login/logout form, with password retrieval functionality and a register form snippet.</p>

Shaun McCormickjako

Login

Add interactive links, product cards, and buttons to your videos with ease.

The Interactive Video widget allows you to embed clickable links directly onto your videos. This feature provides an easy way to guide viewers to additional content, products, or services seamlessly. By integrating links, you can create a more engaging and interactive viewing experience, helping drive traffic to specific pages and boosting conversions.

Add Interactive Links with the Interactive Video Widget

With the Interactive Video widget, you can add product cards featuring an image, title, and description to your videos. This allows you to showcase products or services directly within your video content. By providing detailed product information and visuals, you can increase viewer interest and drive sales without interrupting the viewing experience.

Enhance Videos with Product Cards Using the Interactive Video Tool

The Interactive Video widget enables you to place custom buttons within your videos. These buttons can be used to prompt specific actions, such as signing up for a newsletter, learning more about a topic, or making a purchase. By integrating call-to-action buttons, you can guide your audience towards desired outcomes and enhance the interactivity of your video content.

Boost Engagement with Custom Buttons on Interactive Videos

The Interactive Video widget offers flexible video dimension options to fit your website's design. You can select from preset sizes suitable for mobile, landscape, and other standard formats, or define custom dimensions to perfectly match your layout requirements. This adaptability ensures that your videos are displayed optimally, enhancing the visual appeal and user experience on your site.

Customize Video Dimensions with the Interactive Video Widget

The Interactive Video widget offers versatile positioning options to seamlessly integrate videos into your website. You can display videos inline as part of your page content or have them minimized and floating at one of the page corners. When a viewer clicks to play, the minimized video will expand, providing an engaging and immersive experience. This flexibility ensures that your videos are always presented in the most effective and user-friendly manner.

Flexible Video Positioning with the Interactive Video Widget

The Interactive Video widget provides a range of beautiful skins, enabling you to align the design seamlessly with your brand and website aesthetics. This variety not only enhances the visual appeal of your site but also reduces the time and effort involved in customization, ensuring a cohesive and attractive user interface.

Select from Multiple Interactive Video Widget Design Skins

The Interactive Video widget comes with extensive customization capabilities, allowing you to modify its design to suit your specific requirements. You can adjust colors, fonts, spacing, and other elements, giving you the flexibility to create a widget that is both functional and uniquely tailored to your website's aesthetic.

Fully Customizable Interactive Video Widget

The Interactive Video widget is designed to be fully responsive, ensuring it displays elegantly on any device. In an era where mobile optimization is crucial, this feature is key to delivering a consistent user experience across all devices.

Perfectly Responsive Interactive Video Widget

The Interactive Video widget is designed with user-friendliness in mind, requiring no coding expertise for customization. Its intuitive dashboard simplifies the customization process, allowing you to tailor the widget to your preferences with just a few clicks. This ease of use makes it accessible for anyone to integrate and modify, enhancing your website's functionality without needing specialized knowledge.

Easy to Use Interactive Video Widget

The Interactive Video widget offers the option to add custom CSS, aligning with Common Ninja’s commitment to flexibility. This feature is ideal for developers and designers who want to apply their unique touch, allowing for deeper customization of the widget's look and functionality. It provides an avenue for creative expression, ensuring the widget can be finely tuned to match your website's specific style and interaction needs.

Custom CSS for Enhanced Creativity

Embedding the Interactive Video widget on your website is straightforward, requiring just a single line of code. This ease of integration simplifies the setup, making it accessible for users of all technical levels. Additionally, the widget updates automatically with every change you make, ensuring that your website always displays the most current version of the widget without any extra effort.

Effortless Embedding of the Interactive Video Widget on Any Website

Adding interactive elements to your videos can significantly enhance user engagement. This feature encourages viewers to interact with your content, leading to longer watch times and higher retention rates.

Boost User Engagement with Interactive Video

The Interactive Video widget can help convert viewers into customers by incorporating clickable links, call-to-action buttons, and forms directly within the video. This seamless integration can lead to higher conversion rates and improved business outcomes.

Drive Conversions with Interactive Video Tool

Interactive videos provide a dynamic and engaging user experience. By allowing users to interact with the video content, you can create a more immersive experience that keeps visitors on your site longer and encourages them to explore more of your content.

Enhance User Experience on Your Website

Interactive Video

Boost Sales

Media

User Engagement

New!

A code snippets widget compatible with various layouts, themes, and more rich features

Our Code Snippets Widget offers a diverse selection of visually appealing themes to match your preferred coding environment. Choose from a range of stylish themes, including dark and light modes, or even create your custom theme. Tailor your code presentation to your liking and create an immersive coding experience that reflects your unique style and preferences.

Beautiful Code Themes

With our Code Snippets Widget, you can showcase multiple code snippets in a clean and organized manner. Effortlessly toggle between snippets using intuitive tabs or present them in a list layout for easy comparison.

Multiple Code Snippets

Our Code Snippets Widget comes equipped with a powerful AI code assistant to supercharge your development process. Get intelligent code suggestions and context-aware recommendations, enhancing your productivity.

AI Code Assistant

Our Code Snippets Widget comes equipped with built-in formatting options to ensure clean and consistent code presentation.

Formatting Options

The Code Snippets Widget incorporates advanced syntax highlighting, making your code visually distinct and easier to read. 

Syntax Highlighting

Our Code Snippets Widget supports various file extension types and displays the corresponding file icon for each extension.

File Extension Support

The Code Snippets widget is easy to use and requires no coding knowledge. Our intuitive dashboard with the drag-and-drop feature will enable you to customize the widget any way you’d like to with just a few simple clicks.

Easy to Use

With the Code Snippets widget, you have complete control over the look and feel of your design. You can easily customize various elements such as the colors, fonts, and spacing to match your brand or personal style. Whether you want to create a sleek, modern design or a more traditional look, the Code Snippets widget has you covered. With its wide range of customization options, you can easily tweak and adjust every aspect of your design to get the perfect look for your project.

Fully Customizable

The Code Snippets widget is a valuable tool for any website. Not only is it fully responsive, meaning it will adjust seamlessly to fit the screen size of any device, but it also has a sleek and modern design that will enhance the overall look of your site. In a world where more and more people are accessing the internet through their phones and tablets, it is crucial to have a website that is optimized for mobile viewing. The Code Snippets widget will allow you to do just that, giving you an edge over competitors.

Perfectly Responsive

Our advanced editor is a powerful tool that gives you complete control over the appearance of the Code Snippets widget. With this feature, you can easily customize every aspect of the widget's look and feel, from the colors and fonts to the layout and positioning. But if you're feeling particularly creative, you can take your customization to the next level by editing the CSS directly. This gives you the ability to make even more advanced changes to the widget, allowing you to make it your own. Whether you want to make a few simple tweaks or go all out with advanced customizations, our advanced editor has you covered.

Custom CSS

To embed the Code Snippets widget on your website, simply copy and paste the provided code snippet into the HTML of your webpage. Additionally, the widget is designed to be self-updating, meaning that any changes you make to the Code Snippets Editor will be reflected automatically on your website without the need for any additional manual updates.

Easy to Embed

For developers, students, and enthusiasts, our Code Snippets Widget enhances visual learning by presenting code samples with syntax highlighting and line numbering. Ignite passion for coding and create an engaging learning experience that sets you apart.

Empower Visual Learning

Enrich your technical content without sacrificing clarity. Embed code snippets seamlessly, enhancing explanations and making them easy to follow. Perfect for programming concepts and real-world examples.

Streamline Code Presentation

The Code Snippets Widget showcases your programming expertise with visually appealing displays. Share multiple code snippets, captivate your audience with interactive showcases.

Implement Code Showcases

Code Snippets

Get Creative

Website Components

Create customizable leaderboards to display rankings and track participant scores.

Effortlessly personalize the Leaderboard Widget by adding custom names and images for each participant. This feature enhances the visual appeal of the leaderboard, making it easier for users to recognize and connect with top performers at a glance.

Customize Participant Names and Images

Enhance the Leaderboard Widget with custom icons, prefixes, and suffixes to represent different score types, like points, currency, or any custom label you choose. Use icons such as trophies or dollar signs, and add labels like "$" or "pts" for clear, intuitive scoring. You can also use free text to create any custom score type, ensuring your leaderboard is both visually appealing and easy to understand.

Customize Score Icons, Prefixes, and Suffixes for Clarity

Easily customize the Leaderboard Widget by adding dynamic fields to the table. This feature allows you to include extra information for each participant, such as achievements, ranks, or custom metrics, tailored to your needs. It provides the flexibility to adapt the leaderboard for various use cases, ensuring that you can display all the relevant details in a single, organized view.

Add Custom Fields for a Tailored Leaderboard

Showcase each participant’s progress towards a specific goal using the Leaderboard Widget’s built-in progress bar. This feature allows you to set custom goals, such as sales targets or point milestones, and visually track how close each participant is to achieving them. The progress bar provides a clear, at-a-glance view of individual achievements, adding an extra layer of motivation and competition.

Display Goals with a Progress Bar for Each Participant

The Ranking Board offers a special display option to emphasize the top three positions. This feature allows you to create a visually distinct podium for the 1st, 2nd, and 3rd place winners, making their achievements stand out. It’s a great way to celebrate the top performers and encourage healthy competition, drawing attention to those who reach the top spots.

Highlight Top Performers with a Special Podium Display

The Leaderboard Widget allows you to choose from various score types to suit your needs, including numerical scores and time-based options. This flexibility ensures that you can display and rank participants using the most appropriate format for your competition or event, providing accurate and meaningful results.

Flexible Score Types for Accurate Tracking

The Leader Board Widget offers a variety of beautiful design skins, allowing you to choose a style that aligns with your website's branding. These skins make it easy to create a leaderboard that looks professional and integrates seamlessly with your site's overall design, saving time on customization.

Choose from Multiple leaderboard  Design Skins

The Scoreboard Widget offers a wide range of customization options, allowing you to adjust colors, fonts, spacing, and more to fit your brand perfectly. This flexibility ensures that you can create a leaderboard that aligns with your website's design and meets your unique needs, creating a personalized experience for your users.

Fully Customizable Scoreboard Widget

The Leaderboard Display is fully responsive, ensuring that your leaderboard looks great and functions smoothly on any device, from desktops to tablets and mobile phones. This ensures a consistent user experience across all screen sizes, making your rankings accessible to all visitors.



Perfectly Responsive Leaderboard Display

The Leaderboard Widget is designed for ease of use, requiring no coding knowledge to set up and customize. Its intuitive interface allows you to quickly create and manage leaderboards, saving you time while ensuring a polished display of rankings.



Easy to Use Leaderboard Widget

For those who want more creative freedom, the Leaderboard Widget includes the option to add custom CSS. This allows you to fine-tune every aspect of the widget’s appearance, making it possible to match your leaderboard perfectly with your website’s style and design.

Custom CSS for Advanced Design Control

Embedding the Ranking Board is simple, requiring just a single line of code. This makes integration quick and hassle-free, no matter your technical skill level. Additionally, the widget automatically updates whenever you make changes, ensuring your leaderboard stays up-to-date without any extra effort.

Effortless Embedding of the Ranking Board on Any Website

Encourage competition and engagement on your website by displaying top performers through the Leaderboard. This feature helps create a sense of accomplishment and motivates participants to improve their scores, keeping them actively involved with your platform.

Drive User Engagement with Interactive Leaderboard

Highlight the top players or participants with visually appealing podium displays, boosting their recognition. This not only helps build a community but also creates an incentive for others to strive for higher performance, driving overall engagement.

Showcase Achievements with the Scoreboard Widget

The Leader Board Widget is highly adaptable, fitting seamlessly into various scenarios—from tracking sales reps' performance to ranking participants in a game or event. Its flexibility ensures it meets the specific needs of your site, making it a valuable addition to any competition or leaderboard-based activity.

Customizable Leaderboard for Any Use Case

Leaderboard

Gaming

Corner pop-up builder - versatile, customizable, and user-friendly.

The Corner Pop-up Builder offers an array of diverse layouts, ensuring there's a perfect fit for every website design. By selecting an appropriate layout, website owners can ensure their site retains its unified and appealing aesthetic.

Multiple Floating Corner Pop-up Layouts

Positioning is effortless with the Corner Pop-up Builder. Whether it's the left, center, or right corner, website owners have the flexibility to choose the ideal spot. This adaptability ensures the pop-up complements the site's layout and doesn't obstruct crucial content.

Flexible Corner Placement Options

The Corner Pop-up Builder offers unparalleled design freedom. Incorporate various elements like headlines, sub-headlines, text blocks, and visuals, arranging them to convey your message effectively. The builder's flexibility ensures your pop-up aligns with your communication goals.

Element Flexibility and Customization

With the Corner Pop-up Builder, you're not limited to just text and visuals. It's designed to integrate other widgets, be it countdown timers, sliders, or any other feature available on Common Ninja. This capability transforms your corner pop-ups into multi-functional tools, enhancing your website's interactivity and dynamism.

Elevate Your Corner Pop-ups with Embedded Features

The Corner Pop-up Builder boasts a selection of pre-designed skins, enabling you to infuse style into your corner pop-ups without delving deep into customization. Pick a skin that resonates with your brand's aesthetic, and you're set.

Stylish Skins at Your Fingertips

With the Corner Pop-up Builder, tailor your pop-up content to dynamically adapt based on visitor interactions or set criteria. This introduces a layer of personalization to your corner pop-ups, elevating the user experience and fostering increased engagement.

Adaptive Content Display

Dictate the timing of your floating pop-ups using the builder's adaptable timing feature. Whether you want it to manifest instantly upon page load, after a specific duration, or as a visitor contemplates exiting, you have the strategic advantage of guiding user interactions.

Tailored Pop-up Display Timing

Crafting your ideal corner pop-up is straightforward with the Corner Pop-up Builder. There's no need for coding expertise; its intuitive drag-and-drop interface facilitates effortless customization, bringing your vision to life in mere moments.

User-Friendly Pop-up Creation

The Corner Pop-up Builder is a haven for customization. From colors and fonts to spacing, website owners have the tools to make the pop-up truly their own. Every detail can be fine-tuned to align with the site's unique design and branding.

The Corner Pop-up Builder is engineered for full responsiveness, guaranteeing your pop-ups maintain their allure across devices. In an era that values mobile optimization, this feature ensures you deliver a consistent user experience, irrespective of the device in use.

Perfectly responsive display on Any Device

In line with Common Ninja's suite of widgets, the Corner Pop-up Builder empowers you with custom CSS capabilities. This feature grants you the liberty to infuse a personal touch, allowing for even more inventive pop-up designs.

Get Creative with Custom CSS

Integrating the corner pop-up you've crafted with the builder into your website is a cinch. It's as straightforward as copying and pasting a singular code line. Moreover, any modifications made within the builder are instantaneously reflected on your site, ensuring your pop-ups remain current without additional exertion.

Simple Corner Pop-up Integration

The Corner Pop-Up Builder is designed with the website visitor in mind. Instead of bombarding them with full-screen pop-ups, this widget offers a more subtle approach. By placing content in the corner of the website, site owners can share important information without disrupting the browsing flow. This delicate balance ensures that visitors aren't overwhelmed, potentially leading to better user retention and reduced bounce rates.

Enhanced User Experience

With the Corner Pop-Up Builder, site owners are not limited in their design choices. They have the freedom to design corner pop-ups that reflect their brand's unique style and voice. This means every pop-up can be a creative expression, tailored to fit the aesthetics and message of the website.

Creative Freedom

The Floating Corner PopUp Builder isn't just for text. Site owners can integrate various types of content and media into their corner pop-ups. Whether it's images, videos, or interactive elements, this widget provides the flexibility to be as creative as one wishes, enhancing the site's dynamic appeal.

Versatile Content Integration

Corner Pop-up Builder

Popups, Bars & Buttons

An audio player compatible with various files and sources

With just a few clicks, you can present the audio player widget in a vertical format, with a sleek, minimalist interface that features large intuitive buttons for play, pause, and skip, as well as a progress bar to show the current track's playback position and large album artwork – making it the design ideal for mobile devices.

Mobile-Friendly Design for Greater Reach

The widget can be customized to show a minimal audio player, with important elements like the cover album, the title, and the control buttons, to remove unnecessary information, and make the user truly enjoy one song at a time. 


Minimalist Design to Focus on Single Songs

With the playlist view, you can showcase multiple albums and songs to immerse your users in them truly, and to offer quick and easy navigation across the different albums. 


Expanded Design to Showcase a Full Album

Style 4

Style 5

The Audio Player widget features the ability to add audio from various sources — be it MP3s or links to audio and video hosting websites like YouTube, Vimeo, SoundCloud and more!

Multiple Audio Sources

The Audio Player comes with the shuffle option that will enable your users to listen to your audio in random order.

Shuffle

The Audio Player features the ability to toggle and customize the playlist view. You can customize the playlist and make it complement your style, or, alternatively, use the minimal version to create a more aesthetically pleasing experience.

Playlist View

The Audio Player widget offers several options to choose from, including the mini-player, which is a compact and discreet design that won't take up too much space on your page, and the enlarged thumbnail, which is a larger player that showcases the audio artwork in greater detail. Both layouts have their own unique benefits and can be used in different contexts. The mini-player is ideal for those who want to add audio to their website without making it too prominent, while the enlarged thumbnail is perfect for those who want to highlight the audio artwork and make it a focal point of the page.

Multiple Layouts

You can easily change the position of the Audio Player via the position option. Inline? Top right? Bottom left? Really, the choice is yours.

Position

The Audio Player widget offers a variety of stunning premade skins that you can use to create an Audio Player quickly and easily. Instead of spending hours trying to find the right colors or fonts, simply select a premade skin that you like and start building your comparison table. With a range of styles to choose from, you can find the perfect look and feel to match your brand and style. Whether you want a sleek and modern design, a bold and colorful look, or a clean and minimalistic style, there's something for everyone.

Multiple Skins

The Audio Player widget comes with full customization options, giving you the ability to easily edit the design to match the aesthetic of your website. You can change the colors of the slider, buttons, and labels to match your branding. You can also choose from different font options and adjust the font size, style, and color to create a cohesive and professional look. In addition to these design options, you can customize the widget's spacing to ensure it fits seamlessly into your website layout.

The Audio Player widget is a valuable tool for any website. Not only is it fully responsive, meaning it will adjust seamlessly to fit the screen size of any device, but it also has a sleek and modern design that will enhance the overall look of your site. In a world where more and more people are accessing the internet through their phones and tablets, it is crucial to have a website that is optimized for mobile viewing. The Audio Player widget will allow you to do just that, giving you an edge over competitors.

Perfectly Responsive Audio Player

The Audio Player widget is easy to use and requires no coding knowledge. Our intuitive dashboard with the drag-and-drop feature will enable you to customize the widget any way you’d like to with just a few simple clicks.

Our advanced editor is a powerful tool that gives you complete control over the appearance of the Audio Player widget. With this feature, you can easily customize every aspect of the widget's look and feel, from the colors and fonts to the layout and positioning. But if you're feeling particularly creative, you can take your customization to the next level by editing the CSS directly. This gives you the ability to make even more advanced changes to the widget, allowing you to make it your own. Whether you want to make a few simple tweaks or go all out with advanced customizations, our advanced editor has you covered.

Audio Player Custom CSS

To embed the Audio Player widget on your website, simply copy and paste the provided code snippet into the HTML of your webpage. Additionally, the widget is designed to be self-updating, meaning that any changes you make to the Audio Player Editor will be reflected automatically on your website without the need for any additional manual updates.

Easy to Embed Audio Player

Use this powerful music player tool to add your mp3 files, music, songs, podcasts, or other equally entertaining audio projects and make your projects accessible to a broader audience!

Promote Yourself with the Audio Player Widget

Add more variety to your content and cater to the different needs of your audience. Add a read-along for children to follow stories, create podcasts, or add an accompanying music playlist to your text.

Enrich Your website Content with a Music Player Widget

You can improve your users’ experience by making certain audio files available with an mp3 Player Widget. You can, for example, create audio versions of your well-researched, highly informative, and exceptionally entertaining text, upload it via the Music Player Widget and allow visually impaired users to enjoy it. Or, make it available for those who are on the go and can’t sit and read your long text.

Improve User Experience

Audio Player

Interactive Hover Effects

Personalize the Vimeo Slider by adjusting colors, fonts, spacing, and layouts to match your website’s branding and style perfectly.

Fully Customizable Design Options

The Vimeo Slider automatically adjusts to any screen size, ensuring your videos look stunning on all devices, including desktops, tablets, and mobile phones.

Fully Responsive and Mobile-Friendly

Keep your website fresh with the slider’s auto-refresh feature, which syncs with your Vimeo account to display your most recent uploads automatically.

Auto-Updating Vimeo Content

Make each video in your Vimeo slider clickable, allowing users to watch content directly and boosting engagement with your channel.

Clickable Videos for Enhanced Interaction

No coding knowledge is required to install the Vimeo Slider Widget. Its intuitive interface allows for quick setup and effortless customization.

Easy to Set Up and Use

For developers and advanced users, the Vimeo Slider Widget supports custom CSS, providing complete control over its appearance and functionality.

Advanced Customization with Custom CSS

The Vimeo Slider Widget is compatible with all major website platforms and can be embedded with a single line of code for easy integration.

Seamless Integration on Any Website

The Vimeo Slider Widget displays your Vimeo videos in an elegant scrolling slider, providing a modern and visually appealing way to present your content.



Showcase Videos in a Dynamic Scrolling Format

By integrating a Vimeo slider, you encourage visitors to interact with your videos directly, increasing engagement and time spent on your site.

Enhance User Engagement with Interactive Features

Featuring Vimeo videos in a sleek slider enhances your website’s aesthetics, showcasing your brand’s creativity and captivating your audience.

Login

MODX extra

App Details

Pricing

App Info

Some of the best Common Ninja extras for MODX

Interactive Video

Code Snippets

Leaderboard

Corner Pop-up Builder

Audio Player

Vimeo Slider

Info List

Glossary

Notification Popup

Calculator

Pricing Slider

Device Mockup

extras You Might Like

Discover the best apps for your website

Common Ninja Search Engine

Login

MODX extra

App Details

Pricing

Check Out the Interactive Video Widget

App Info

Some of the best Common Ninja extras for MODX

Interactive Video

Code Snippets

Leaderboard

Corner Pop-up Builder

Audio Player

Vimeo Slider

Info List

Glossary

Notification Popup

Calculator

Pricing Slider

Device Mockup

extras You Might Like

Discover the best apps for your website

Common Ninja Search Engine