How This Script Helps with Squarespace's VAT Settings

Anyone who's tried setting up VAT rates on Squarespace knows how incredibly frustrating it can be. The platform doesn’t allow you to simply add a VAT rate, like 23%, across all regions. Instead, you have to spend hours manually clicking through multiple elements to add the same VAT rate for around 300 different locations. This script saves you from that painstaking process.

As a seller, it's crucial to charge the correct VAT on all sales, but Squarespace makes it extremely difficult to do this efficiently. Additionally, if you have products with different VAT rates (for example, books at a reduced rate of 5%), there's no straightforward way to implement this on Squarespace. This script can help you add the same VAT rate to all regions quickly, allowing you to comply with VAT regulations more easily.

The script automates the entire process of adding VAT rates to each country and state. You just need to open your Squarespace dashboard and navigate to the Selling/Taxes page where the "Add Rate" button is under the "Manual setup" block. Then, paste this script into your browser's console and run it by pressing Enter.

How to Customize the Script

The script is designed to be flexible, allowing you to adjust it to your needs. Here’s how you can customize it:

• Tax Rate: The script is set to add a 23% VAT rate by default. If you need a different rate, you can change it easily at the top of the code.
• Action Delay: You can adjust the pause in milliseconds between each action. Feel free to change this to suit your pace (though it's not recommended to go below 100 milliseconds).
• Confirmation Window: You can choose whether to have a confirmation window before adding each country or region. This option gives you more control over the process if you prefer to monitor each step or if you'd rather let it run automatically.

This script helps you save hours of manual work and makes it much easier to handle the VAT setup on Squarespace. While it doesn’t solve all the VAT-related issues on the platform, it's a significant step towards making the process less frustrating and more efficient.

Below is the JavaScript code. You can copy and use it on your website:

  
  
  




// Settings
const actionDelay = 100; // Delay between actions (you can change this value)
const askForConfirmation= false; // If true, the script will repeat with confirmation after each country or region
const taxRate = 23; // Tax rate to be entered in step 6 (you can change this value)

async function automateFormFilling() {
    // Flag to determine if we have encountered a situation with unavailable states
    let encounteredNoAvailableStates = false;

    // Function for delay
    function delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    // Function to set value in input
    function setInputValue(inputElement, value) {
        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
        nativeInputValueSetter.call(inputElement, value);

        // Triggering necessary events for reactive state
        inputElement.dispatchEvent(new Event('input', { bubbles: true }));
        inputElement.dispatchEvent(new Event('change', { bubbles: true }));
    }

    // Function to select a country
    async function selectCountry() {
        // Step 2: Click on the "Select Country" combobox
        const comboBox = document.querySelector('div[role="combobox"][placeholder="Select Country"]');
        if (comboBox) {
            comboBox.click();
            await delay(actionDelay); // Pause between actions
        } else {
            console.error("Combobox 'Select Country' not found");
            return false;
        }

        // Step 3: Click on the available country
        const countryOptions = Array.from(document.querySelectorAll('li[role="option"]'))
            .filter(option => option.getAttribute("aria-disabled") === "false");

        if (countryOptions.length === 0) {
            console.error("No available countries to select");
            return false;
        }

        // If only one available country is left, click "Cancel" and stop the script
        if (countryOptions.length === 1) {
            const cancelButton = document.querySelector('button[type="button"].css-1uj0sxn');
            if (cancelButton) {
                cancelButton.click(); // Click the "Cancel" button
                await delay(actionDelay); // Pause between actions
            } else {
                console.warn("Cancel button not found");
            }

            alert("All done");
            return false; // Stop execution
        }

        // If we have already encountered a situation with unavailable states, select the second available country
        const selectedCountry = encounteredNoAvailableStates && countryOptions.length > 1 
            ? countryOptions[1] 
            : countryOptions[0];

        selectedCountry.click();
        await delay(actionDelay); // Pause between actions
        return true; // Successfully selected a country
    }

    // Function to select a state
    async function selectState() {
        const stateComboBox = document.querySelector('div[role="combobox"][placeholder="Select State"]');
        if (stateComboBox) {
            stateComboBox.click();
            await delay(actionDelay); // Pause between actions

            // Click on the first available state
            const stateOptions = document.querySelectorAll('li[role="option"]');
            for (const option of stateOptions) {
                if (option.getAttribute("aria-disabled") === "false") {
                    option.click();
                    await delay(actionDelay); // Pause between actions
                    return true; // Successfully selected a state
                }
            }

            console.warn("No available states for the selected country");
            encounteredNoAvailableStates = true; // Mark that we encountered a situation with unavailable states
            return false; // If no available state
        }

        return true; // If the state selection field did not appear, this is also considered successful
    }

    // Step 1: Click on the "Add Rate" button
    const addRateButton = document.querySelector('button.css-10h066u > span');
    if (addRateButton) {
        addRateButton.click();
        await delay(actionDelay + 200); // Increased pause for the window to open
    } else {
        console.error("Button 'Add Rate' not found");
        return;
    }

    // Perform country and state selection with checking
    while (true) {
        const countrySelected = await selectCountry();
        if (!countrySelected) return; // If no available countries or only one left, stop execution

        const stateSelected = await selectState();
        if (stateSelected) break; // If a state was successfully selected or not needed, exit the loop
    }

    // Step 4: Click on the "Next" button
    const nextButton = document.querySelector('button[data-testid="next-btn"]');
    if (nextButton) {
        nextButton.click();
        await delay(actionDelay + 200); // Increased pause for the window to switch
    } else {
        console.error("Button 'Next' not found");
        return;
    }

    // Step 5: Enter "VAT" in the input (if present)
    const vatInput = document.querySelector('input[data-testid="tax-name-input"]');
    if (vatInput) {
        vatInput.focus(); // Focus on the input
        setInputValue(vatInput, "VAT"); // Set the value and trigger events
        vatInput.blur(); // Remove focus
        await delay(actionDelay); // Pause between actions
    } else {
        console.warn("Input 'tax-name' not found, skipping step");
    }

    // Step 6: Change the input value from "0" to the tax rate
    const rateInput = document.querySelector('input[data-testid="tax-rate-input"]');
    if (rateInput) {
        rateInput.focus(); // Focus on the input
        setInputValue(rateInput, taxRate.toString()); // Set the tax rate and trigger events
        rateInput.blur(); // Remove focus
        await delay(actionDelay); // Pause between actions
    } else {
        console.error("Input 'tax-rate' not found");
        return;
    }

    // Step 7: Enable the switcher
    const switcherLabel = document.querySelector('label[data-field="true"] .css-6adq27');
    if (switcherLabel) {
        switcherLabel.click(); // Click on the parent label of the switcher
        await delay(actionDelay); // Pause between actions
    } else {
        console.error("Switcher not found");
        return;
    }

    // Step 8: Click on the "Save" button
    const saveButton = document.querySelector('button[data-testid="save-btn"]');
    if (saveButton) {
        saveButton.click();
        await delay(actionDelay + 200); // Pause to ensure the process is saved
    } else {
        console.error("Button 'Save' not found");
        return;
    }

    // Check for the need to ask for a repeat
    if (askForConfirmation) {
        if (confirm("Cycle completed. Would you like to repeat and add another country?")) {
            await delay(actionDelay + 500); // Pause before starting a new cycle
            automateFormFilling(); // Recursive call to repeat the cycle
        }
    } else {
        // Automatically repeat without asking
        await delay(actionDelay + 500); // Pause before starting a new cycle
        automateFormFilling(); // Recursive call to repeat the cycle
    }
}

// Start the script
automateFormFilling();