8ul.ru - Free URL Shortner

Quick Installation

1. Add the widget script

Insert this code before the closing </body> tag:

<script src="https://8ul.ru/widget.js"></script>

2. Create container element

Place this div where you want the widget to appear:

<div id="my-url-shortener"></div>

3. Initialize the widget

Add this initialization script:

<script>
    initUrlShortenerWidget({
        containerId: 'my-url-shortener',
        // Optional parameters:
        theme: 'light', // or 'dark'
        showAliasField: false,
        apiUrl: 'https://8ul.ru/submit.php',
        defaultTexts: {
            title: 'URL Shortener',
            inputPlaceholder: 'Enter long URL',
            buttonText: 'Shorten'
        }
    });
</script>

Key Features

⚡️ Modern Design

Clean, responsive interface that works on all devices with light/dark themes

🔧 Fully Customizable

Change texts, colors and behavior through configuration options

📱 Mobile Friendly

Perfectly adapts to smartphones, tablets and desktop screens

📋 Copy Functionality

One-click copy of shortened URLs with visual feedback

🛡️ Secure

Built-in URL validation and error handling

⚙️ Multiple Integrations

Works with WordPress, React, plain HTML and more

Advanced Customization

Option	Type	Default	Description
containerId	string	required	ID of the container element
theme	string	'light'	Color theme: 'light' or 'dark'
showAliasField	boolean	false	Show/hide custom alias field
apiUrl	string	'/submit.php'	Endpoint for shortening API

Text Key	Default Value
title	'URL Shortener'
inputPlaceholder	'Enter long URL'
aliasPlaceholder	'Custom alias (optional)'
buttonText	'Shorten'
successMessage	'Short URL created!'
errorMessages.invalidUrl	'Please enter a valid URL'

Override default styles by targeting these CSS classes:

/* Main widget container */
.url-shortener-widget {}

/* Form elements */
.url-shortener-form {}
.url-shortener-form input {}
.url-shortener-form button {}

/* Results container */
.result-container {}
.success-message {}
.error-message {}

/* Dark theme */
.url-shortener-widget.theme-dark {}

Integration Examples

Add to WordPress using Custom HTML block:

<!-- WordPress Shortcode -->
[html]
<script src="https://8ul.ru/widget.js"></script>
<div id="wp-url-shortener"></div>
<script>
    initUrlShortenerWidget({
        containerId: 'wp-url-shortener',
        theme: 'light',
        defaultTexts: {
            title: 'Shorten Your Links'
        }
    });
</script>
[/html]

Standard HTML implementation:

<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
</head>
<body>
    <h1>Welcome</h1>
    
    <!-- Widget Container -->
    <div id="html-widget"></div>
    
    <!-- Widget Implementation -->
    <script src="https://8ul.ru/widget.js"></script>
    <script>
        initUrlShortenerWidget({
            containerId: 'html-widget',
            theme: 'dark',
            showAliasField: true
        });
    </script>
</body>
</html>

React component implementation:

import { useEffect } from 'react';

export default function UrlShortener() {
    useEffect(() => {
        // Load widget script
        const script = document.createElement('script');
        script.src = "https://8ul.ru/widget.js";
        script.async = true;
        
        // Initialize when loaded
        script.onload = () => {
            window.initUrlShortenerWidget({
                containerId: 'react-url-shortener',
                theme: 'light'
            });
        };
        
        document.body.appendChild(script);
        
        return () => {
            document.body.removeChild(script);
        };
    }, []);

    return <div id="react-url-shortener" />;
}

Embed using iFrame (no JavaScript required):

<iframe src="https://8ul.ru" 
        width="100%" 
        height="200"
        style="border: none;">
</iframe>

Note: iFrame version has limited functionality compared to JS widget.

URL Shortener Widget

Interactive Demo