☕ Tip Jar — demos

One <script> tag, three placements, a JS API. Each demo is a plain host page.

Inline →Renders where the tag sits Floating →Fixed corner button + popover Modal →Trigger opens a dialog JS API →render() / open() / close()

The one-tag embed

<script src="https://tipjar.bilalhasson.com/widget.js"
        data-creator="Bilal"
        data-currency="gbp"
        data-amounts="3,5,10"
        data-placement="inline"></script>

Configuration (data attributes)

Attribute	Default	Purpose
`data-creator`	—	Name in the header + attached to the tip
`data-currency`	`gbp`	ISO code; drives Intl formatting
`data-amounts`	`3,5,10`	Preset amounts (decimals allowed)
`data-placement`	`inline`	`inline` · `floating` · `modal`
`data-position`	`bottom-right`	Floating only: `bottom-right`/`bottom-left`
`data-color`	`#6366f1`	Accent colour
`data-avatar`	`☕`	Emoji or image URL
`data-title`	Buy {creator} a coffee	Header copy
`data-theme`	`auto`	`auto`/`light`/`dark`
`data-auto`	`true`	Set `false` to skip auto-init (drive via JS API)

Test card: 4242 4242 4242 4242, any future expiry, any CVC/postcode.

← home