UI Components and Typography

Shortlink & Safelink Generator tools are designed to help you easily create shortened URLs and secure them with safelink redirection. These features were introduced in Plus UI v3.2+.

Experimental Features!
Both the Shortlink and Safelink Generator are in experimental stage. Your feedback will help improve stability and performance in upcoming updates.

Looking for Demo? You can view the live demo of both generators here: Safelink Generator | Shortlink Generator

🔗 What is Shortlink Generator?

The Shortlink Generator uses Firebase Dynamic Links to create short, shareable links. These links can redirect users to your desired URLs while allowing tracking, branding, and optional analytics.

To enable this feature, you must configure your Firebase API credentials first.

1. Open your Firebase Console and navigate to Dynamic Links.
2. Create a new domain, for example: https://example.page.link.
3. Copy your API Key from Project Settings → General → Web API Key.
4. Replace the placeholder values in the script:

   const SHORTLINK_DOMAIN = "https://YOUR_DOMAIN.page.link";
   const SHORTLINK_KEY = "YOUR_FIREBASE_API_KEY";

Once configured, paste the following code into your Blogger page’s HTML view:

<!-- [Begin: Shortlink Generator area] -->
<style>
.inF.cB button,.sgOw{align-items:center;background:var(--contentB)}.inF.cB button,.sgOw button{display:flex;cursor:pointer}.inF.cB button{--svgW:16px;--svgH:16px;position:absolute;inset-block-start:10px;inset-inline-end:10px;width:30px;height:30px;justify-content:center;border-radius:8px;border:1px solid var(--contentLa);opacity:.5}.inF.cB input{padding-inline-end:50px}.inF.cB input:not(:placeholder-shown)~button{opacity:1}.sgMw{max-width:600px;margin:40px auto}.sgOw{display:flex;gap:12px 8px;flex-wrap:wrap;border:1px solid var(--contentL);border-radius:5px;padding:12px}.sgOw span{width:100%;line-height:1.4em;font-size:14px}.sgOw button{--svgW:20px;--svgH:20px;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;background:var(--linkB);color:#fffdfc;border-radius:8px}.sgOs{flex:1 1 35%;width:100%;max-width:120px;margin:12px 0;padding:16px}
</style>

<script>
// Firebase shortlink config
const SHORTLINK_DOMAIN = "https://XXXXXX.page.link"; // Replace
const SHORTLINK_KEY = "XXXXXXXX-NNN-7VVVVV-UUUUUUU-P"; // Replace

/*! Plus UI Javascript (shortlink/generator.js) | Authors: Deo Kumar, Armaan Kumar | Refactored 2025 */
"use strict";((t,e,n)=>{let{cEl:_,iAE:i,aEL:s,qSel:r,gId:o,eHTML:a,tNtf:l}=n,c=_("div",{className:"sgMw",innerHTML:`...`}); // full script here
</script>
<!-- [End: Shortlink Generator area] -->

What is Safelink + Shortlink Generator?

This combined generator provides both link-shortening and safelink encryption. It encodes outgoing links for extra security and monetization flexibility while also providing Firebase-based shortlinks.

1. Ensure Safelink Plugin is enabled from Theme Designer.
2. Configure at least one safelink page in your Theme HTML editor (see Safelink Setup Guide).
3. Replace Firebase credentials in the script below.
4. Paste the code inside a new Blogger page (HTML view).

<!-- [Begin: Safelink + Shortlink Generator area] -->
<style>... your CSS ...</style>
<script>
// Firebase Shortlink config
const SHORTLINK_DOMAIN = "https://XXXXXX.page.link"; // Replace
const SHORTLINK_KEY = "XXXXXXXX-NNN-7VVVVV-UUUUUUU-P"; // Replace

/*! Plus UI Javascript (safelink+shortlink/generator.js) | Authors: Deo Kumar, Armaan Kumar | Refactored 2025 */
"use strict";((t,e,n)=>{ ... full combined script ... })(window,document,PU);
</script>
<!-- [End: Safelink + Shortlink Generator area] -->

Tips:

• Always replace your Firebase keys with real credentials before testing.
• If the shortened or safelinked URL doesn’t open, ensure your API permissions are set to public.
• Enable “Safelink Plugin” under Theme Designer → Advanced → Plugin: Safelink (Experimental).
• Use class='safeL' on anchor links to auto-wrap them in safelink.

Final Output

Once you add the above code, your page will include a modern interface like this:

• A text box to enter destination URLs
• Buttons to shorten, copy, and open links
• Dropdown to select safelink pages
• Built-in warnings if safelink is not enabled or configured

✅ Done! You’ve successfully set up the Shortlink and Safelink Generator in your Blogger theme.