How to Add a “Click to Copy” Button in Hostinger Website Builder

Adding a “Click to Copy” button to your website can enhance user experience, making it easier for visitors to copy essential information such as promo codes, referral links, API keys, or even email addresses. In this guide, I’ll show you how to add a click-to-copy button in Hostinger Website Builder step by step.

Why Use a Click-to-Copy Button?

This feature is useful for:

• Copying promo codes for discounts
• Sharing referral invite codes
• Copying ready-to-run command snippets
• Providing contact information like email addresses
• Copying tracking or order numbers
• Sharing API keys or tokens

Steps to Add a Click-to-Copy Button in Hostinger Website Builder

1. Log in to Your Hostinger Website Builder

1. Go to Hostinger and log in to your account.
2. Navigate to the Websites section.
3. Select your website and click Edit Website.

2. Insert the Click-to-Copy Button Code

1. Scroll to the section where you want to add the button.
2. Click Add Element from the left-side menu.
3. Scroll down and select Embed Code.
4. Drag and drop the Embed Code element into your page.
5. Click on Enter Code, delete the default text, and paste the following code:

<div class="copy-container">
    <h2 class="copy-title">Click-to-Copy Button</h2>
    <input type="text" id="copyText" value="https://bensexperience.com" readonly>
    <button onclick="copyToClipboard()">Copy</button>
    <p id="copyMessage"></p>
</div>

<script>
function copyToClipboard() {
    var copyText = document.getElementById("copyText");
    copyText.select();
    copyText.setSelectionRange(0, 99999); // For mobile devices
    document.execCommand("copy");

    var message = document.getElementById("copyMessage");
    message.innerHTML = "Copied!";
    setTimeout(() => { message.innerHTML = ""; }, 2000);
}
</script>

<style>
.copy-container {
    text-align: center;
    background: #f4f4f4;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}

.copy-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

input {
    width: 80%;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
}

button {
    background: #0073e6;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
}

button:hover {
    background: #005bb5;
}

#copyMessage {
    margin-top: 10px;
    font-size: 14px;
    color: green;
}
</style>

6. Click Update Website and preview your site.

3. Customize the Button

If you want to modify the button text, color, or copied content:

• Change the button text: Locate "Copy" in the <button> element and replace it with your desired text.
• Edit the copied text: Change the value inside <input type="text" id="copyText" value="Your Text Here"> to the text you want users to copy.
• Customize the background color: Add the following CSS inside <style> tags:

4. Test Your Click-to-Copy Button

1. Save your changes and update your website.
2. Visit your site and click the button.
3. Paste the copied text somewhere to verify that it works.

Final Thoughts

By following these steps, you can easily add a Click-to-Copy button in Hostinger Website Builder and improve the usability of your website. This feature is especially useful for sharing promo codes, referral links, and essential contact details.

For more tutorials, check out my free Hostinger Website Builder course: university.bensexperience.com. If you have any questions, leave a comment below!