Skip to main content

CodePen

CodePen is a utility that allows you to put anything you want through HTML, CSS, JS. If you are a CodePen lover you will love this extension. You will certainly find it easy to customize your website without having to touch the default source code.

Pro Feature

This widget is available in the Astroid Pro version only. If you are using the free version, consider upgrading to access this feature.

⚙️ Configuration Options​

Once you add the CodePen Widget, you can configure it under the following sections:

1. General Settings​

🔘 Code Selector​

Choose which type of code you want to insert:

  • HTML – Use this to insert raw HTML markup.
  • CSS – Use this to insert custom styling.
  • JavaScript – Use this to add interactive scripts.

📄 HTML Section​

If you choose HTML:

  • Field: Custom HTML
  • Description: Paste your raw HTML code here.

🎨 CSS Section​

If you choose CSS:

  • Field: Custom CSS

  • Description: Paste your custom CSS styling here.

  • Field: External CSS URLs

  • Use case: Add external CSS files (e.g., Bootstrap or other stylesheets) via URL.

  • Format: One entry per URL (e.g., https://cdn.example.com/style.css).

💻 JavaScript Section​

If you choose JavaScript:

  • Field: Custom JS

  • Description: Paste your JavaScript code here.

  • Field: Libraries

  • Available options:

    • GSAP
    • GSAP.Flip
    • GSAP.ScrollTrigger
    • FancyBox
    • Masonry
    • Slick
    • ImagesLoaded
    • Lenis

  • Usage: Tick the libraries you want to load with your code.

  • Field: External JS URLs

  • Use case: Load external JavaScript libraries via URL.

  • Format: One entry per URL (e.g., https://cdn.example.com/script.js).

📌 Assignment Settings​

Control where this widget appears on your site:

  • Assignment Type

    • All Pages – Show on every page.
    • No Pages – Hide completely.
    • Selected Pages – Choose specific menu items.

  • Assign to Menu Items

    • If Selected Pages is chosen, select menu items to display the widget.

🧠 Tips​

  • Always test your custom code on a staging site before deploying to production.
  • If you use external libraries, make sure the URLs are valid and CORS-enabled if needed.
  • This widget is perfect for showcasing interactive components, code education, or creating small tools.

📷 Example Use Case​

Want to display a bouncing ball animation using GSAP?

  1. Select JavaScript in the code selector.
  2. Paste your animation code into Custom JS.
  3. Select the GSAP library.
  4. (Optional) Add custom HTML/CSS to structure and style the demo.

✅ Conclusion​

The CodePen Widget in Astroid gives you complete control over embedded code previews right within your Joomla pages. Whether you're showcasing interactive content or teaching front-end concepts, this widget makes it simple and powerful.