How to Add the Webring Studio Widget to Your Website

For WordPress users

Option 1: Use a Plugin (Recommended for Most)

If you want the widget to appear sitewide (like in your footer or across every page), the easiest and safest method is a Header & Footer plugin.

Our Top Pick: WPCode

1. In WordPress, go to Plugins > Add New
2. Search for “WPCode” → Install → Activate
3. Go to Code Snippets > Header & Footer
4. Paste your Webring Studio script into the Footer section
5. Click Save Changes

Done. Your widget now appears across your entire site!

---

Option 2: Add It to a Specific Page (Gutenberg Only)

Only want it on your homepage? Blog page? Portfolio?

1. Edit the page
2. Click + Add Block
3. Choose Custom HTML
4. Paste in your widget code
5. Preview it, then Publish or Update

Heads up: Some security plugins block scripts inside posts/pages. If it doesn’t show, try Option 1 instead.

---

Option 3: Add It to a Sidebar

Still rockin’ a sidebar? No problem. If your theme supports widget areas:

1. Go to Appearance > Widgets
2. Find your Sidebar area
3. Drag in a Custom HTML widget
4. Paste in your Webring Studio code
5. Save

Boom! Your widget is now vibing in the sidebar like it’s 2012 and proud.

---

Option 4: For Developers — Add to functions.php

If you’re comfy with PHP, you can add this to your functions.php file or a custom plugin:

phpCopyEditadd_action('wp_footer', function () {
    ?>
    <script>
      // Paste your Webring Studio code here
    </script>
    <?php
});

Great for full-site embeds and power users who want tight control.

---

Not Using WordPress?

No worries — the Webring Studio widget plays nicely with almost any site builder or platform.

Here’s how to add it elsewhere:

Platform	Where to Add the Code
Squarespace	Settings > Advanced > Code Injection (Footer)
Wix	Settings > Custom Code → Add to Footer
Weebly	Settings > SEO > Footer Code
Ghost	Code Injection > Site Footer
Webflow	Project Settings > Custom Code > Footer
Carrd	Add an Embed Element → Paste your script
Static HTML	Paste it just before </body> in your HTML file

Reminder: The code looks something like this:

<!-- Webring Widget -->
<div id="webring-bab77edc-acf9-48c2-ba9d-f29e9eb6b262"></div>
<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://jbvdjvgpccgsmmfqzisa.supabase.co/functions/v1/widget/bab77edc-acf9-48c2-ba9d-f29e9eb6b262';
  script.async = true;
  document.head.appendChild(script);
})();
</script>