Google Translate Widget for Squarespace

<!-- Font Awesome for Icons -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<!-- Multilingual Translation Widget Card -->

<div style="max-width: 1200px; margin: auto; padding: 40px 20px;">

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 20px 0;">

<div style="

border-radius: 10px;

padding: 25px;

background: linear-gradient(135deg, #F86A1E, #FB9C1B, #FECD18);

color: #FFFFFF;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

transition: transform 0.3s ease, box-shadow 0.3s ease;

display: flex;

flex-direction: column;

align-items: flex-start;

text-align: left;

min-height: 500px;">

<h3 style="color: inherit; margin-bottom: 10px;">

<i class="fa-solid fa-language fa-lg" style="color: #FFFFFF; margin-right: 10px;"></i>

Multilingual Translation Widget

</h3>

<p style="flex-grow: 1; min-height: 80px;">

Easily make your Squarespace website multilingual! This simple, lightweight widget lets visitors instantly translate your site into multiple languages—no coding required.

</p>

<!-- Key Features -->

<div style="margin-top: 15px; font-size: 0.9rem; line-height: 1.6;">

<p><i class="fa-solid fa-plug-circle-check" style="color: #FFFFFF; margin-right: 8px;"></i> Seamless integration – Works effortlessly with Squarespace.</p>

<p><i class="fa-solid fa-sliders" style="color: #FFFFFF; margin-right: 8px;"></i> Fully customisable – Adjust colours, icons, and positioning.</p>

<p><i class="fa-solid fa-mobile-screen" style="color: #FFFFFF; margin-right: 8px;"></i> Mobile & desktop friendly – Responsive on all devices.</p>

<p><i class="fa-solid fa-handshake" style="color: #FFFFFF; margin-right: 8px;"></i> No third-party apps needed – Uses Google’s official translation service.</p>

<p><i class="fa-solid fa-rocket" style="color: #FFFFFF; margin-right: 8px;"></i> Quick & easy setup – Copy, paste, and it’s ready to go!</p>

</div>

<!-- Personalisation Options -->

<div style="margin-top: 15px; font-size: 0.9rem; line-height: 1.6;">

<strong>Personalise Your Widget</strong>

<p><i class="fa-solid fa-flag" style="color: #FFFFFF; margin-right: 8px;"></i> Choose your languages – Display only the ones relevant to your audience.</p>

<p><i class="fa-solid fa-icons" style="color: #FFFFFF; margin-right: 8px;"></i> Change the icon – Swap the globe for a flag or another Font Awesome icon.</p>

<p><i class="fa-solid fa-palette" style="color: #FFFFFF; margin-right: 8px;"></i> Adjust the style – Modify colours, borders, and shadows to blend seamlessly.</p>

<p><i class="fa-solid fa-eye-slash" style="color: #FFFFFF; margin-right: 8px;"></i> Display only the icon – Option to remove text and just show the globe.</p>

</div>

<!-- Why This Widget is a Smart Investment -->

<div style="margin-top: 15px; font-size: 0.9rem; line-height: 1.6;">

<strong>Why This Widget is a Smart Investment</strong>

<p><i class="fa-solid fa-clock" style="color: #FFFFFF; margin-right: 8px;"></i> Saves you time – No need to research, test, or troubleshoot—just copy, paste, and it’s live.</p>

<p><i class="fa-solid fa-money-bill" style="color: #FFFFFF; margin-right: 8px;"></i> One-time purchase – No ongoing subscription fees or third-party apps required.</p>

<p><i class="fa-solid fa-wrench" style="color: #FFFFFF; margin-right: 8px;"></i> Customisable to match your brand – Comes with easy-to-follow instructions.</p>

<p><i class="fa-solid fa-chart-line" style="color: #FFFFFF; margin-right: 8px;"></i> Better for SEO & Accessibility – Uses Google’s official translation system.</p>

<p><i class="fa-solid fa-lightbulb" style="color: #FFFFFF; margin-right: 8px;"></i> Solves a common problem – Makes Google Translate integration effortless.</p>

</div>

<p style="margin-top: 15px; font-size: 0.9rem;">

<i class="fa-solid fa-globe" style="color: #FFFFFF; margin-right: 8px;"></i>

Supports 100+ languages – Expand your reach and make your site accessible worldwide.

</p>

<p style="margin-top: 15px; font-size: 0.9rem; color: #FFFFFF;">

Boost engagement, improve accessibility, and grow your audience today!

</p>

</div>

</div>

</div>