How to Add an Online Calculator in Hostinger Website Builder

ByBen
Go to Hostinger.com
Get Hostinger Free Courses

Adding an online calculator to your Hostinger Website Builder site is a great way to provide interactive functionality for your visitors. Whether you need a basic calculator for simple arithmetic operations or something more advanced, integrating a custom calculator is straightforward with Hostinger’s embed code element.

Step 1: Log in to Hostinger Website Builder

  1. Access your Hostinger account.
  2. Navigate to Websites and open the Websites List.
  3. Click Edit Website next to the site where you want to add the calculator.

If you have multiple websites, you can distinguish them by their icons—WordPress sites have a WordPress logo, while Hostinger Website Builder sites have a different icon.

Step 2: Create a New Page for the Calculator

  1. In the website editor, go to Pages and click Add Page.
  2. Choose an Empty Page and name it Calculator or Online Calculator.
  3. Save the new page.

Step 3: Insert the Calculator Code

  1. Create a New Section and select a Blank Section.
  2. Click the + (Add Element) button and scroll down to Embed Code.
  3. Drag and drop the Embed Code element into the section.
  4. Click Enter Code, delete any existing content, and paste the calculator’s HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple JavaScript Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 403px;
            background-color: #f4f4f4;
        }
        .calculator {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        .calculator input {
            width: 100%;
            height: 50px;
            font-size: 1.5em;
            text-align: right;
            margin-bottom: 10px;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        button {
            padding: 15px;
            font-size: 1.2em;
            border: none;
            background: #007bff;
            color: white;
            cursor: pointer;
            border-radius: 5px;
        }
        button:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" disabled>
        <div class="buttons">
            <button onclick="clearDisplay()">C</button>
            <button onclick="appendToDisplay('/')">/</button>
            <button onclick="appendToDisplay('*')">*</button>
            <button onclick="appendToDisplay('-')">-</button>
            <button onclick="appendToDisplay('7')">7</button>
            <button onclick="appendToDisplay('8')">8</button>
            <button onclick="appendToDisplay('9')">9</button>
            <button onclick="appendToDisplay('+')">+</button>
            <button onclick="appendToDisplay('4')">4</button>
            <button onclick="appendToDisplay('5')">5</button>
            <button onclick="appendToDisplay('6')">6</button>
            <button onclick="calculateResult()">=</button>
            <button onclick="appendToDisplay('1')">1</button>
            <button onclick="appendToDisplay('2')">2</button>
            <button onclick="appendToDisplay('3')">3</button>
            <button onclick="appendToDisplay('0')">0</button>
        </div>
    </div>
    <script>
        function appendToDisplay(value) {
            document.getElementById('display').value += value;
        }
        function clearDisplay() {
            document.getElementById('display').value = '';
        }
        function calculateResult() {
            try {
                document.getElementById('display').value = eval(document.getElementById('display').value);
            } catch (e) {
                alert('Invalid expression');
            }
        }
    </script>
</body>
</html>

Step 4: Publish and Optimize Your Page

  • Click Update Website to save changes.
  • Visit your site to test the calculator.
  • Adjust the layout by adding a title and SEO-optimized text to improve Google rankings.

Bonus Tip: SEO Optimization

To rank your online calculator page in search engines, use a keyword research tool like Ubersuggest to find relevant search terms. Add high-search-volume keywords to your page, such as:
✅ Online Calculator
✅ Free Calculator for Websites
✅ Simple Arithmetic Calculator

Conclusion

Adding an online calculator in Hostinger Website Builder is quick and easy. Just follow the steps above to integrate the calculator and enhance your website’s functionality. If you need further assistance, feel free to ask in the comments!

Similar Posts