tinyconsent-webcomponent

v1.0.1

Published

2 months ago

Web Component for TinyConsent cookie consent banners. Use <tiny-consent> in any HTML page or framework.

tinyconsent-webcomponent

Cookie consent banner as a Web Component. Works in any HTML page or framework.

A framework-agnostic Web Component for adding TinyConsent cookie consent banners. Use <tiny-consent> anywhere - vanilla HTML, Vue, Angular, Svelte, or any other framework.

Why TinyConsent Web Component?

🌐 Framework agnostic - Works everywhere: HTML, Vue, Angular, Svelte, etc.
🚀 One element - Just <tiny-consent script-id="..." />
📦 Tiny - Under 1KB, loads the actual banner async
✅ Cookie consent handling - Loads your TinyConsent banner and lets you wire consent into your tracking scripts
🔧 Designed for Google Consent Mode v2 - Works with GA4-style implementations
🎨 Customizable - Configure via dashboard, no code changes
🔌 Auto-registers - Just import and use

Get your script ID: tinyconsent.com/cookie-banner-generator

Installation

npm install tinyconsent-webcomponent

yarn add tinyconsent-webcomponent

pnpm add tinyconsent-webcomponent

Or use via CDN:

<script type="module">
  import 'https://esm.sh/tinyconsent-webcomponent';
</script>

Quick Start

HTML

<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import 'tinyconsent-webcomponent';
  </script>
</head>
<body>
  <tiny-consent script-id="your-script-id"></tiny-consent>
  
  <!-- Your content -->
</body>
</html>

CDN (No Build Step)

<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import 'https://esm.sh/tinyconsent-webcomponent';
  </script>
</head>
<body>
  <tiny-consent script-id="your-script-id"></tiny-consent>
</body>
</html>

That's it! Your cookie consent banner will appear automatically.

What It Does

The <tiny-consent> element injects:

<script src="https://scripts.tinyconsent.com/api/scripts/your-script-id" async></script>

No internal logic, no bloat - just loads your cookie banner script on connectedCallback.

API Reference

`<tiny-consent>` Element

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | script-id | string | Required | Your TinyConsent script ID | | async | string | "true" | Load script asynchronously | | defer | string | "false" | Defer script execution |

Events

| Event | Detail | Description | |-------|--------|-------------| | load | - | Fired when script loads | | error | Error | Fired if script fails to load |

const consent = document.querySelector('tiny-consent');
consent.addEventListener('load', () => console.log('Banner loaded!'));
consent.addEventListener('error', (e) => console.error(e.detail));

JavaScript API

import { registerTinyConsent, getTinyConsentScriptUrl } from 'tinyconsent-webcomponent';

// Register with custom tag name (optional)
registerTinyConsent('my-cookie-banner');

// Get script URL
const url = getTinyConsentScriptUrl('your-script-id');

Programmatic Creation

const consent = document.createElement('tiny-consent');
consent.setAttribute('script-id', 'your-script-id');
document.body.appendChild(consent);

Framework Examples

Vue.js

<template>
  <div>
    <tiny-consent script-id="your-script-id"></tiny-consent>
    <!-- Your app -->
  </div>
</template>

<script setup>
import 'tinyconsent-webcomponent';
</script>

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import 'tinyconsent-webcomponent';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  // ...
})
export class AppModule {}

<!-- app.component.html -->
<tiny-consent script-id="your-script-id"></tiny-consent>

Svelte

<script>
  import 'tinyconsent-webcomponent';
</script>

<tiny-consent script-id="your-script-id"></tiny-consent>

Lit

import { LitElement, html } from 'lit';
import 'tinyconsent-webcomponent';

class MyApp extends LitElement {
  render() {
    return html`
      <tiny-consent script-id="your-script-id"></tiny-consent>
      <div>My App</div>
    `;
  }
}

Plain HTML with Events

<tiny-consent 
  script-id="your-script-id"
  id="cookie-consent"
></tiny-consent>

<script type="module">
  import 'tinyconsent-webcomponent';
  
  const consent = document.getElementById('cookie-consent');
  
  consent.addEventListener('load', () => {
    console.log('Cookie banner is ready!');
  });
  
  consent.addEventListener('error', (event) => {
    console.error('Failed to load banner:', event.detail);
  });
</script>

Cookie Banners vs. Full Compliance

What a Cookie Banner Does

A cookie banner handles the consent collection part of privacy compliance:

Displays a notice about cookies and tracking
Collects user consent preferences
Blocks non-essential scripts until consent is given
Stores consent choices

What Full Compliance Requires

Cookie consent is just one part of privacy law compliance. Full compliance also includes:

Privacy Policy - Document explaining your data practices
Data Processing Records - Internal documentation
User Rights Handling - Ability to handle data access/deletion requests
Legal Basis - Proper justification for data processing

TinyConsent helps with cookie consent. For your privacy policy, use: tinyconsent.com/privacy-policy-generator

GDPR Cookie Consent Requirements

The GDPR (General Data Protection Regulation) requires:

Prior consent - Get consent BEFORE setting non-essential cookies
Informed consent - Tell users what cookies do
Granular options - Let users choose cookie categories
Easy withdrawal - Make it easy to change preferences
No pre-ticked boxes - Consent must be affirmative

Learn more: GDPR Cookie Requirements

CCPA Requirements

The CCPA (California Consumer Privacy Act) requires:

Notice at collection - Disclose what data you collect
Opt-out right - "Do Not Sell My Personal Information" option
Non-discrimination - Can't penalize users who opt out

Learn more: CCPA Cookie Requirements

FAQ

How do I get a script ID?

Visit tinyconsent.com/cookie-banner-generator
Enter your email
Copy your script ID

Does this work with all frameworks?

Yes! Web Components work in any framework: React, Vue, Angular, Svelte, Lit, or plain HTML.

Does it block tracking scripts?

Yes. TinyConsent blocks Google Analytics, Facebook Pixel, and other trackers until the user consents.

Does it support Google Consent Mode v2?

Yes. Google Consent Mode is automatically integrated.

Can I customize the banner appearance?

Yes! All customization is done in your TinyConsent Dashboard.

Do I need a privacy policy?

Yes, privacy regulations require one. Generate yours: tinyconsent.com/privacy-policy-generator

Is a cookie banner enough for GDPR compliance?

No. A cookie banner handles consent collection, but full GDPR compliance requires a privacy policy, data processing records, and more. TinyConsent helps with the cookie consent part.

Troubleshooting

Element not recognized

Make sure you import the module before using the element:

<script type="module">
  import 'tinyconsent-webcomponent';
</script>

Banner not appearing

Check your script ID is correct
Ensure the import is loading (check Network tab)
Test in incognito mode
Check browser console for errors

TypeScript types not found

The package includes TypeScript definitions. If you have issues:

/// <reference types="tinyconsent-webcomponent" />

Vue/Angular custom element warnings

Configure your framework to recognize custom elements:

Vue 3:

// vite.config.js
export default {
  vue: {
    compilerOptions: {
      isCustomElement: tag => tag === 'tiny-consent'
    }
  }
}

Angular:

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

TypeScript

Full TypeScript support:

import { 
  TinyConsentElement,
  registerTinyConsent,
  getTinyConsentScriptUrl,
  TinyConsentAttributes
} from 'tinyconsent-webcomponent';

// Type the element
const element = document.querySelector('tiny-consent') as TinyConsentElement;
console.log(element.loaded); // boolean

Related Packages

tinyconsent - Vanilla JS/TS loader
tinyconsent-react - React component

Resources

Cookie Banner Generator: tinyconsent.com/cookie-banner-generator
Privacy Policy Generator: tinyconsent.com/privacy-policy-generator
Dashboard: tinyconsent.com/dashboard
What is a Cookie Banner?: tinyconsent.com/what-is-a-cookie-banner
GDPR Guide: tinyconsent.com/gdpr-cookie-requirements

License

Keywords: cookie banner, cookie consent, web component, custom element, GDPR, CCPA, cookie banner generator, cookie consent script, one line cookie banner, lightweight cookie consent, cookie banner npm, vanilla js, framework agnostic, privacy, consent management

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

tinyconsent-webcomponent

Why TinyConsent Web Component?

Installation

Quick Start

HTML

CDN (No Build Step)

What It Does

API Reference

<tiny-consent> Element

Events

JavaScript API

Programmatic Creation

Framework Examples

Vue.js

Angular

Svelte

Lit

Plain HTML with Events

Cookie Banners vs. Full Compliance

What a Cookie Banner Does

What Full Compliance Requires

GDPR Cookie Consent Requirements

CCPA Requirements

FAQ

How do I get a script ID?

Does this work with all frameworks?

Does it block tracking scripts?

Does it support Google Consent Mode v2?

Can I customize the banner appearance?

Do I need a privacy policy?

Is a cookie banner enough for GDPR compliance?

Troubleshooting

Element not recognized

Banner not appearing

TypeScript types not found

Vue/Angular custom element warnings

TypeScript

Related Packages

Resources

License

`<tiny-consent>` Element