Embed support widgets
Embed Widgets
Embed a Myhappr support card directly into your website or add a beautiful floating support button.
You can easily collect support on your own website, blog, or portfolio by embedding a Myhappr widget. We provide two types of widgets:
- Inline Embed: An interactive tip card that sits directly inside your page content, perfect for the bottom of blog posts or articles.
- Floating / Inline Button: A button that can either float fixed in the bottom corner of the screen, or be placed inline anywhere in your page layout (e.g., inside a hero section) using custom attributes. Clicking it opens the slide-out drawer containing your tip card.
Getting your Embed Code
You don't need to write any code manually. Simply head to the Developer Settings on your dashboard, navigate to the Widgets & Embeds tab, and use the interactive configurator to customize your widget.
Adding the Inline Widget to your site
Paste the copied <iframe> code into your website's HTML wherever you want the tip card to appear.
Adding the Floating Button (Fixed Corner) to your site
Paste the copied <script> tag just before the closing </body> tag of your website's HTML, or load it inside your React/Next.js layout component. The button will automatically position itself in the bottom right corner of the viewport.
Adding the Inline Button (Custom Placement) to your site
If you want the button to float in the page flow rather than sticking to the bottom-right corner, you can place a standard button element with data-myhappr-username attributes anywhere in your container layout. You can also customize the brand color, border radius, text, and title parameters dynamically.
Widget Parameters Explained
Here is a simple list of all the custom parameters you can add to your code snippet to change how the widget looks and behaves:
data-username(ordata-myhappr-usernamefor custom buttons) is your unique Myhappr username. This tells our system exactly who should receive the tips.data-coloris the main brand color for the support card. It is used for buttons, highlight outlines, and active elements. You can pass any standard color code like a hex color.data-text-colorallows you to choose a custom color for the text inside your trigger button. If you leave it out, our system will automatically choose white or black depending on which gives the best readability against your brand color.data-radiuscontrols how rounded the corners of your button are. You can use values like 9999px for a fully pill-shaped button, 8px for slightly rounded corners, or 0px for perfectly sharp square corners.data-textis the text message written on your trigger button.data-fontlets you choose a font that matches your branding. You can select clean modern fonts like Inter, Outfit, Roboto, Plus Jakarta Sans, Geist, or Playfair Display. If you don't define this, the widget will dynamically adapt and inherit the exact font used on your website.data-titleis a custom title displayed at the top of the tip card. If you want to say something personal like "Support WonderKids", you can pass that text here.data-theme(or thethemeparameter on iframes) sets the color scheme of the sliding drawer or card. You can passlightordark, or you can even supply your own custom hexadecimal background color code (such as#1a1b26). If you supply a dark custom color, our system automatically shifts the card content into dark mode text and styling to ensure perfect readability.
How the Slide-out Drawer Works
When a supporter clicks either the Floating or Inline Button, the widget loader dynamically slides a drawer into view from the right side of the screen. Under the hood, this drawer is engineered for optimal performance, user experience, and security:
- Instant Preloading: The iframe is injected and loaded in the background as soon as the host page loads, ensuring that the tip card appears instantly without delay when the button is clicked.
- Premium Aesthetics & Transitions: The drawer overlay utilizes a darkened background with a modern blur effect (
backdrop-filter: blur(4px)) and smooth slide animations (translateXtransitions) for a native app-like experience. - Page Scroll Lock: While the drawer is active, scrolling on the host page is automatically disabled (
overflow: hiddenon the document body) to prevent accidental layout shifts or double-scrolling. - Accessibility & Keyboard Support: Supports keyboard standards. Pressing the
Escapekey or clicking outside the drawer instantly closes it, returning focus back to the button. - Smart Form Reset: Upon closing the drawer, a secure message is sent to the iframe to reset the support form state. This ensures that the next time the button is clicked, supporters see a clean form without reloading the iframe.
- Sandbox Protection: The iframe uses a strict
sandboxconfiguration, allowing only necessary integrations (scripts, forms, popups, and top-level redirect actions for payment checkouts) to keep your host site completely secure.