SocialLink.Bio already gives you a simple way to create a professional bio link page. But what if you want to add your own code — like ad scripts, tracking pixels, or special design styles? That’s where the Custom Script and Custom CSS blocks come in. In this guide, we’ll show you how to use these options step by step.

What is the Custom Script Block?

The Custom Script block allows you to paste JavaScript or HTML code into your SocialLink.Bio page.
You can use this for:

  • 1. Adding third-party ads (Monetag, Adsterra, Galaksion, etc.)
  • 2. Installing Google Analytics or Facebook Pixel for tracking
  • 3. Embedding widgets like countdown timers, pop-ups, or chat tools

What is the Custom CSS Block?

The Custom CSS block lets you change the look and feel of your bio page.
You can use this for:

  • 1.Changing button colors, shapes, or sizes
  • 2. Editing text fonts and styles
  • 3. Adding gradients, shadows, or animations
  • 4. Making your page look more unique

🛠 How to Add Custom Script or CSS in SocialLink.Bio

Follow these simple steps:

  • 1. Login to SocialLink.Bio: Open your dashboard and go to your bio page settings.
  • 2. Click on “Settings” Tab: You’ll see two input boxes: Custom Script and Custom CSS.
  • 3. Paste Your Custom Code: In Custom Script, paste JavaScript/HTML codes (for ads, analytics, widgets). In Custom CSS, paste your CSS codes (for styling and design changes).
  • 4. Save Customizations: Click the Save Customizations button (red button at the bottom).

Refresh your page to see the changes live.

💡 Example Use Cases

Example For Custom Script:

1. Add Google Analytics Tracking

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-XXXXXXX');
</script>

2. Add Direct Link Ad Script for Monetization

<script type="text/javascript" src="https://adnetwork.com/directlink.js"></script>

Paste this code inside the Custom Script block.

Example For Custom CSS:

1. Change Button Color with CSS

a.item-wrapper.bg-white {background-color: red !important;color: white !important;}

2. Change Sharing Button Color with CSS

button {
  background: linear-gradient(to right, #ff512f, #dd2476);
  border-radius: 12px;
  font-size: 18px;
  font-weight: bold;
}

Paste this inside the Custom CSS block to give your buttons a stylish gradient look.

for further CSS modification you have to find CSS element & clss from developer tool & have to make code accordingly.

⚠️ Important Tips

  • 1. Only use code from trusted sources to avoid security risks.
  • 2. Test small changes first before adding large scripts.
  • 3. If something looks broken, remove the last code you added and save again.
  • 4. CSS works instantly, but some scripts may take a few seconds to load.

Final Thoughts

The Custom Script and Custom CSS options make SocialLink.Bio super flexible. Whether you want to monetize your page, track visitors, or customize the design, you can easily do it by adding your own code.

Start experimenting with your favorite scripts and styles today, and make your bio page stand out! 🚀