Guides

Cineamo Banner Script

The Cineamo Banner Script is a lightweight JavaScript widget that displays a sticky banner promoting the Cineamo mobile app. It automatically detects the user's language and device type, providing deep links to the App Store and Google Play Store.

Quick Start

Add the following markup to your HTML file:

Code
<body>
    <div id="cineamo-banner"></div>
    <!-- other page content -->
    <script src="https://cdn.cineamo.com/scripts/cineamo-banner.js"></script>
</body>

That's it! The banner will appear at the top of your page, automatically styled and responsive.

Configuration

Display Mode

Control which devices should show the banner using the optional mode parameter. If omitted, the banner will be shown on all devices (default behavior).

Code
<!-- Show on all devices (default - no parameter needed) -->
<script src="cineamo-banner.js"></script>

<!-- Show on desktop only -->
<script src="cineamo-banner.js?mode=desktop"></script>

<!-- Show on mobile only -->
<script src="cineamo-banner.js?mode=mobile"></script>

<!-- Show on both (explicit, same as default) -->
<script src="cineamo-banner.js?mode=desktop,mobile"></script>

Mobile Breakpoint

Define the maximum screen width (in pixels) for a device to be considered mobile. The default is 1024px.

Code
<!-- Set mobile breakpoint to 768px -->
<script src="cineamo-banner.js?maxWidthMobile=768"></script>

Combined Parameters

You can combine multiple parameters:

Code
<script src="cineamo-banner.js?mode=desktop,mobile&maxWidthMobile=1024"></script>

Features

Automatic Language Detection

The banner automatically detects the user's language and displays the appropriate text:

English: "New: Go to Cineamo App"
German (default): "Neu: Zur Cineamo App"

Language detection uses:

The HTML lang attribute (<html lang="en">)
Browser language (navigator.language)

UTM Tracking

The banner automatically includes UTM parameters for tracking:

utm_source: external
utm_medium: website
utm_campaign: Current hostname (e.g., your-cinema.com)
utm_content: banner-cineamo_app

Responsive Design

Sticky positioning: Banner stays at the top while scrolling
Flexbox layout: Icons and text are properly aligned
Device-aware: Show/hide based on screen size
Custom font: Uses Montserrat font from Google Fonts

Banner Appearance

The banner displays:

Apple App Store icon (left)
Google Play Store icon (center-left)
Call-to-action text (right)

Styling:

Black background (#000000)
White text (#F2F2F2)
12px font size, bold weight
10px padding
High z-index (990) to stay above content

Examples

Cinema Website (Mobile Only)

Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cinema Website</title>
</head>
<body>
    <div id="cineamo-banner"></div>

    <header>
        <!-- Your cinema header -->
    </header>

    <main>
        <!-- Your cinema content -->
    </main>

    <script src="https://cdn.cineamo.com/scripts/cineamo-banner.js?mode=mobile&maxWidthMobile=768"></script>
</body>
</html>

Event Website (Desktop Only)

Code
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Event Landing Page</title>
</head>
<body>
    <div id="cineamo-banner"></div>

    <section>
        <!-- Your event content -->
    </section>

    <script src="https://cdn.cineamo.com/scripts/cineamo-banner.js?mode=desktop"></script>
</body>
</html>

Partner Website (All Devices)

Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Partner Website</title>
</head>
<body>
    <div id="cineamo-banner"></div>

    <!-- Your content -->

    <script src="https://cdn.cineamo.com/scripts/cineamo-banner.js"></script>
</body>
</html>

Best Practices

Place the container first: Add <div id="cineamo-banner"></div> at the beginning of your <body> tag for proper sticky positioning
Load script at the end: Place the <script> tag at the end of your <body> for better page load performance
Test on all devices: Verify the banner appears correctly on both mobile and desktop
Consider your audience: Use mode parameter to show the banner only on relevant devices
Monitor analytics: Use the UTM parameters to track conversions from the banner

Technical Details

Requirements

Modern browser with JavaScript enabled
Internet connection (loads Montserrat font from Google Fonts)

Browser Compatibility

The script uses standard web APIs and is compatible with:

Chrome/Edge (latest)
Firefox (latest)
Safari (latest)
Mobile browsers (iOS Safari, Chrome Mobile)

Performance

Size: ~8KB minified
Dependencies: None (vanilla JavaScript)
Font loading: Asynchronous via Google Fonts
Rendering: Immediate DOM manipulation

Troubleshooting

Banner not appearing

Verify the <div id="cineamo-banner"></div> container exists
Check browser console for JavaScript errors
Ensure the script URL is correct and accessible

Wrong device visibility

Check the mode parameter matches your requirements
Verify the maxWidthMobile breakpoint is appropriate
Test with browser DevTools device emulation

Language not detected correctly

Set the lang attribute on your <html> tag: <html lang="en">
The script falls back to German if language detection fails

Support

For questions or issues with the Cineamo Banner Script, contact support at support@cineamo.com.

Last modified on July 9, 2026

Rate Limits