# 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:
```html
```
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).
```html
```
### Mobile Breakpoint
Define the maximum screen width (in pixels) for a device to be considered mobile. The default is `1024px`.
```html
```
### Combined Parameters
You can combine multiple parameters:
```html
```
## 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:
1. The HTML `lang` attribute (``)
2. 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)
```html
Cinema Website
```
### Event Website (Desktop Only)
```html
Event Landing Page
```
### Partner Website (All Devices)
```html
Partner Website
```
## Best Practices
- **Place the container first**: Add `` at the beginning of your `` tag for proper sticky positioning
- **Load script at the end**: Place the `