Embed Your Tip Top Jar

Tip Top Jar can be embedded directly into your website or stream. Whether you're adding a button, inline card, floating widget, or real-time stream alerts, each option is designed to be fast, lightweight, and easy to install.

1. Embed a Button

Add a branded button that links to your Tip Jar. Buttons are customizable and work with any website or blog platform.

To embed:

• Go to your Share page
• Locate the Buttons tile, and click Generate
• Customize the label, icon, and color
• Copy the HTML and paste it into your site where you'd like the button to appear

🔧 Button preview: Use the playground to preview how your button will look with different colors, labels, and icons

2. Inline Tip Card

The Inline Tip Card embeds your full Tip Top Jar profile directly inside your site. Visitors can leave a tip without leaving your site.

To embed:

• Go to your Share page
• Locate the Inline tip card tile, and click Generate
• Copy the embed code and paste it into your HTML where you want it to appear

3. Floating Widget

The Floating Widget adds a fixed “Tip” button in the corner of your site. When clicked, it opens your Tip Jar in a modal.

To embed:

• Go to your Share page
• Locate the Floating widget tile, and click Generate
• Choose message and position
• Copy the code snippet and paste it just before the closing </body> tag of your site

🔧 Widget preview: Customize your floating widget’s position, color, and message using our design playground

4. Developer Integration [React]

For developers, Tip Top Jar offers a React component library that gives you full programmatic control over embeds. The @tiptopjar/react-widget package lets you use our embeds as simple components. No need to copy and paste HTML.

📦 Available on npm

@tiptopjar/react-widget

🧩 Highlights

• Add embeds simply by passing mode="button", mode="inline", or mode="floating" to our component
• Easily configure labels, colors, and positions via props
• Perfect for Next.js and other React frameworks

Code snippet preview

import { TipTopJarEmbed } from '@tiptopjar/react-widget';

export default function App() {
  return (
    <div>
      <h2>Support my work ❤️</h2>
      <TipTopJarEmbed username="yourusername" mode="inline" />
    </div>
  );
}

Adding Tip Top Jar to your site or stream is quick and easy. Choose the embed that fits best, drop it in, and you’re good to go.

Ready to set yours up? Head to your Share page or check out the React widget to get started.