Add the support widget to your own website

Updated on 21 Jul 2026 · 4 min read

1. What the widget is

The website widget is a floating “Support me” button that sits in the corner of your own website — your portfolio, blog, or landing page. When a visitor clicks it, your SupportKori tipping panel slides open right there, and they can send you a tip without ever leaving your site.

Why it matters: the person reading your blog post or admiring your portfolio is at their most impressed in that moment. A button already on the page converts that moment; a link in your footer usually doesn’t get the chance.

You need a website you can edit to use this. No website? Your SupportKori page (supportkori.com/yourname) already does everything the widget does.

2. Customize & copy your code

1
Go to your Dashboard → Integrations → Website Widget → Customize.
2
Pick your button color (swatches on the preview), the message (e.g. “Buy me a coffee”), and the position — bottom left or bottom right. Click the preview button to see the real panel open.
3
Hit Save widget, then copy the Installation code with the copy button.

The code is one small <script> tag carrying your username and styling. It loads asynchronously and won’t slow your site down.

3. Where to paste it

The code goes into your site’s HTML, just before the closing </body> tag — the very end of the page. Like this:

  ...the rest of your page...

    <!-- SupportKori widget -->
    <script
      src="https://supportkori.com/widget.js"
      data-id="yourname"
      data-message="Support me"
      data-color="#FFDD00"
      data-position="right"
    ></script>
  </body>
</html>

Why there? Placing it last means your page’s own content always loads first, and the widget appears a moment later. If you paste it into a “footer scripts” box on a website builder, that’s the same spot — builders inject those right before </body> for you.

4. Platform-by-platform

Plain HTML site

Open your index.html (and any other pages you want the button on), paste the code right above </body>, save, upload. Done.

WordPress

Easiest: install the free WPCode (or any “header & footer code”) plugin → add the code to the Footer section → save. Alternatively, if your theme has Theme Settings → Custom Code → Footer, paste it there. Avoid editing theme files directly — updates wipe them.

Wix

Settings → Custom Code → Add Custom Code → paste it → set “Add Code to Pages” to All pages and place it in Body — end. (Requires a paid Wix plan — Wix blocks custom code on free plans.)

Squarespace

Settings → Advanced → Code Injection → paste into the Footer box → save. (Business plan or higher.)

Framer / Webflow

Framer: Site Settings → General → Custom Code → “End of <body> tag”. Webflow: Project Settings → Custom Code → “Footer Code”. Publish after saving.

React / Next.js

Add the script tag to your root layout (Next.js: in app/layout before </body>, e.g. with next/script strategy afterInteractive). Keep all the data- attributes exactly as copied.

5. Check it’s working

1
Open your website in a normal browser tab (not the builder’s editor — most builders don’t run custom code in edit mode).
2
The button should appear in your chosen corner within a second of the page loading.
3
Click it — your tipping panel opens right on the page. Close it with the ✕. That’s the whole flow your visitors get.

6. Troubleshooting

Button doesn’t appear

View your live site (not the editor), then hard-refresh (Ctrl+Shift+R). Still nothing? Check the code made it into the page: right-click → View Page Source → search for widget.js. If it’s missing, the paste didn’t save or your plan blocks custom code.

Button shows but the panel is blank

Make sure data-id is exactly your SupportKori username (lowercase, no @). Re-copy the code from the dashboard rather than typing it.

Changed the color/message but the site shows the old one

The styling lives in the code snippet itself — after changing settings in the dashboard, copy the NEW code and replace the old snippet on your site.

Button overlaps my chat bubble / cookie bar

Switch the widget to the other corner (Position → Bottom left/right) in the dashboard, then re-copy the code.

Paste the snippet once per site. Pasting it on every page template AND in a global footer box gives you two buttons stacked on top of each other.

Did this article help?