---
title: "Load External CSS and JavaScript - EngageBox"
description: "Need to use a third-party library or custom styling inside your popup? In this guide, you'll learn how to load external CSS and JavaScript files direc"
url: "https://www.tassos.gr/docs/engagebox/developers/load-external-css-javascript"
date: "2026-05-02T01:25:24+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ EngageBox ](https://www.tassos.gr/index.php?option=com_content&view=category&id=35) / [ Developers ](https://www.tassos.gr/index.php?option=com_content&view=category&id=53)

#  Load External CSS and JavaScript

Need to use a third-party library or custom styling inside your popup? In this guide, you'll learn how to load external CSS and JavaScript files directly within EngageBox or using the [Code Snippets](https://www.tassos.gr/joomla-extensions/code-snippets) extension.

## [Load External CSS and JavaScript with EngageBox](#load-external-css-and-javascript-with-engagebox)

Load external CSS and JavaScript directly from your popup settings. This option is available in [EngageBox Pro](https://www.tassos.gr/joomla-extensions/engagebox/subscribe).

1. Edit your EngageBox popup.
2. Go to **PHP Scripts**.
3. Open the **After Render** section.
4. Add your external CSS: ```
    $doc->getWebAssetManager()
        ->registerStyle('style_name', 'https://example.com/style.css')
        ->useStyle('style_name');
    ```
5. Add your external JavaScript: ```
    $doc->getWebAssetManager()
        ->registerScript('library_name', 'https://example.com/script.js')
        ->useScript('library_name');
    ```
6. Save the popup and test it on the frontend.

## [Load External CSS and JavaScript with Code Snippets](#load-external-css-and-javascript-with-code-snippets)

[Code Snippets](https://www.tassos.gr/joomla-extensions/code-snippets) is a versatile free Joomla extension that lets you load external CSS and JavaScript files effortlessly.

- Need to load a JavaScript file? Follow the [**JavaScript External File**](https://www.tassos.gr/docs/code-snippets/types/javascript-external-files) guide.
- Need to load a CSS file? Follow the [**CSS External File**](https://www.tassos.gr/docs/code-snippets/types/css-external-files) guide.

## [Optional Notes section](#optional-notes-section)

- Use unique asset names to avoid conflicts and ensure all assets load properly on your site.
- Prefer trusted/CDN sources only.

 Last updated on Apr 30th 2026 11:04

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "EngageBox",
            "item": "https://www.tassos.gr/docs/engagebox"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Developers",
            "item": "https://www.tassos.gr/docs/engagebox/developers"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "Load External CSS and JavaScript",
            "item": "https://www.tassos.gr/docs/engagebox/developers/load-external-css-javascript"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/engagebox/developers/load-external-css-javascript"
    },
    "headline": "Load External CSS and JavaScript",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Stergos Zamagias",
        "url": "https://www.tassos.gr/docs/engagebox/developers/load-external-css-javascript"
    },
    "datePublished": "2026-04-30T10:16:27+03:00",
    "dateCreated": "2026-04-30T10:16:27+03:00",
    "dateModified": "2026-04-30T11:04:58+03:00"
}
```