Custom CSS & JavaScript

The Custom CSS & JavaScript module lets you inject code that runs only when your website is loaded inside your app. This means you can make app-specific changes — hiding elements, tweaking styles, or adding behavior — without touching your main website at all. Visitors using a browser see the original site; users in the app see your customized version.

Custom CSS

Write standard CSS that is injected into every page inside the app.

• Maximum length: 5000 characters

Common uses

Hide a cookie banner that is unnecessary in the app:

.cookie-banner {
    display: none;
}

Adjust the header to account for the native App Bar:

.site-header {
    display: none;
}

Override a font or spacing for a better mobile layout:

body {
    font-size: 16px;
    line-height: 1.6;
}

Custom JavaScript

Write standard JavaScript that runs on every page inside the app.

• Maximum length: 5000 characters

Common uses

Show a welcome message on first load:

window.addEventListener('load', function () {
    console.log('Running inside Appilix app');
});

Modify page content for app users:

document.querySelector('.app-only-banner').style.display = 'block';

Track a custom event when a button is clicked:

document.querySelector('#subscribe-btn').addEventListener('click', function () {
    console.log('Subscribe clicked inside app');
});