如何用Gemini免费生成WordPress电商折扣码？可点击复制+倒计时（附代码）- 全商道社区

在独立站产品页放一个可点击复制的折扣码卡片，是提升转化率最简单粗暴的办法之一。以前这种带倒计时、一键复制的促销组件要么买插件、要么找人写代码，现在用谷歌的免费 AI 工具 Gemini，动动嘴就能生成完整的 HTML 代码，直接粘贴到 WordPress 里就能用。这篇教程带你完整走一遍：注册、生成折扣码代码、粘贴上线，全程 0 成本。

还没有自己独立站的朋友，请先看全商道社区免费的《WordPress 建站教程》。

如何使用Gemini？

注册一个谷歌邮箱

首先大家必须要有一个谷歌邮箱，毕竟Gemini是谷歌推出的AI工具，同时做外贸的话，没有谷歌邮箱，是肯定不行的，所以大家必须要有自己的谷歌邮箱，最简单的谷歌邮箱注册教程就是手机端开启科学上网的环境下，打开浏览器搜索google.com，然后搜”gmail注册“，按照步骤一步步进行注册即可！实在没办法的话，可以去购买一个谷歌邮箱！

访问谷歌Gemini官网

Gemini官网是：https://gemini.google.com/app，点击访问之后登录即可使用，需要科学上网！目前可以免费使用，有额度，超过之后需要付费！

让Gemini生成可以点击复制优惠券的html代码

在这里，我直接把我的想法跟Gemini说了，然后让它生成html代码，这样子我们就只能直接粘贴到wordpress当中进行使用！

以下是我跟Gemini沟通之后生成的可以点击就复制的优惠券折扣的代码：

这是第一个生成的样式：
有折扣码说明，倒计时等等，上面的文案自己都可以修改！

优惠券卡片代码 · 样式一（带倒计时） HTML

<div class="mega-marketing-card">
    <div class="visual-impact-side">
        <div class="dynamic-bg"></div>
        <div class="impact-content">
            <div class="condition-header">BUY 2+ ITEMS</div>
            <div class="main-offer">
                <span class="val">20</span>
                <div class="unit-group">
                    <span class="perc">%</span>
                    <span class="off">OFF</span>
                </div>
            </div>
            <div class="sub-condition">SITEWIDE ORDER</div>
        </div>
    </div>

    <div class="details-side">
        <div class="top-row">
            <span class="market-tag">LIMITED TIME US OFFER</span>
        </div>

        <h3 class="product-heading">Stock Up & Save Big</h3>
        <p class="product-sub">The more you buy, the more you save. Discount applied to all items in your cart.</p>

        <div class="interactive-copy-box">
            <div class="code-info">
                <span class="label">PROMO CODE</span>
                <span id="targetCode" class="code-text">SAE20</span>
            </div>
            <button class="action-btn" onclick="copyFinalCode(this)">
                <span class="btn-text">GET DISCOUNT</span>
            </button>
        </div>

        <div class="urgency-section">
            <div class="timer-row">
                <span class="pulse-dot"></span>
                <span class="timer-label">Ends In: <strong id="hard-timer">...</strong></span>
            </div>
            <div class="progress-container">
                <div class="progress-bar-fill"></div>
            </div>
        </div>
    </div>
</div>

<style>
    .mega-marketing-card {
        display: flex;
        max-width: 620px;
        min-height: 200px;
        background: #fff;
        border-radius: 24px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        margin: 40px auto;
        font-family: 'Inter', -apple-system, system-ui, sans-serif;
    }

    /* 左侧视觉冲击区 */
    .visual-impact-side {
        width: 42%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        padding: 30px 15px;
    }

    .dynamic-bg {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(135deg, #ff0000 0%, #ff6a00 100%);
        background-size: 200% 200%;
        animation: gradientMove 5s ease infinite;
    }

    @keyframes gradientMove {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    .impact-content { position: relative; z-index: 2; text-align: center; }

    /* 调大的条件字体 */
    .condition-header {
        font-size: 16px;
        font-weight: 900;
        letter-spacing: 1px;
        background: rgba(0,0,0,0.2);
        padding: 4px 12px;
        border-radius: 8px;
        margin-bottom: 8px;
        display: inline-block;
    }

    .main-offer { display: flex; align-items: flex-start; justify-content: center; }
    .main-offer .val { font-size: 82px; font-weight: 900; line-height: 0.85; letter-spacing: -2px; }
    .unit-group { display: flex; flex-direction: column; align-items: flex-start; margin-left: 4px; margin-top: 8px;}
    .unit-group .perc { font-size: 32px; font-weight: 800; line-height: 1; }
    .unit-group .off { font-size: 16px; font-weight: 800; opacity: 0.9; }

    .sub-condition { font-size: 11px; font-weight: 700; margin-top: 10px; opacity: 0.8; letter-spacing: 1.5px; }

    /* 右侧信息区 */
    .details-side { width: 58%; padding: 30px; background: #fff; display: flex; flex-direction: column; justify-content: space-between; }
    .market-tag { font-size: 10px; font-weight: 800; color: #ff0000; letter-spacing: 1px; }
    .product-heading { margin: 10px 0 5px 0; font-size: 24px; color: #111; font-weight: 800; }
    .product-sub { font-size: 14px; color: #666; margin-bottom: 20px; line-height: 1.4; }

    /* 代码复制区 */
    .interactive-copy-box {
        display: flex;
        background: #fdf2f2;
        border: 2px dashed #ff0000;
        border-radius: 16px;
        padding: 8px;
        align-items: center;
        margin-bottom: 20px;
    }

    .code-info { flex-grow: 1; padding-left: 12px; }
    .code-info .label { display: block; font-size: 9px; color: #ff0000; font-weight: 800; }
    .code-info .code-text { font-size: 22px; font-weight: 800; color: #111; font-family: 'Courier New', monospace; }

    .action-btn {
        background: #111;
        color: #fff;
        border: none;
        padding: 14px 20px;
        border-radius: 12px;
        font-weight: 800;
        font-size: 12px;
        cursor: pointer;
        transition: transform 0.2s, background 0.2s;
    }

    .action-btn:hover { background: #ff0000; transform: translateY(-2px); }

    /* 倒计时与进度条 */
    .timer-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
    .pulse-dot { width: 8px; height: 8px; background: #ff0000; border-radius: 50%; animation: pulse 1.5s infinite; }
    .timer-label { font-size: 13px; font-weight: 600; color: #444; }
    .timer-label strong { color: #ff0000; font-variant-numeric: tabular-nums; }

    .progress-container { height: 8px; background: #eee; border-radius: 10px; overflow: hidden; }
    .progress-bar-fill { height: 100%; background: #ff0000; width: 80%; animation: progressSlow 120s linear infinite; }

    @keyframes progressSlow { from { width: 90%; } to { width: 10%; } }
    @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }

    @media (max-width: 500px) {
        .mega-marketing-card { flex-direction: column; }
        .visual-impact-side, .details-side { width: 100%; }
    }
</style>

<script>
    function copyFinalCode(btn) {
        const code = document.getElementById('targetCode').innerText;
        navigator.clipboard.writeText(code).then(() => {
            const btnTxt = btn.querySelector('.btn-text');
            btnTxt.innerText = 'COPIED!';
            btn.style.background = '#10b981';
            setTimeout(() => {
                btnTxt.innerText = 'GET DISCOUNT';
                btn.style.background = '#111';
            }, 2000);
        });
    }

    function initCountdown() {
        const target = new Date("January 19, 2026 00:00:00").getTime();
        const display = document.getElementById('hard-timer');

        setInterval(() => {
            const now = new Date().getTime();
            const diff = target - now;
            if (diff <= 0) { display.innerText = "EXPIRED"; return; }
            const d = Math.floor(diff / 86400000);
            const h = Math.floor((diff % 86400000) / 3600000);
            const m = Math.floor((diff % 3600000) / 60000);
            const s = Math.floor((diff % 60000) / 1000);
            display.innerText = `${d}d ${h}h ${m}m ${s}s`;
        }, 1000);
    }
    document.addEventListener('DOMContentLoaded', initCountdown);
</script>

这是我生成的第二版本的复制优惠券功能代码，是中文版本的

优惠券卡片代码 · 样式二（简约虚线） HTML

<div class="coupon-container">
    <div class="coupon-card">
        <div class="coupon-left">
            <div class="discount-amount">20%</div>
            <div class="discount-type">OFF</div>
        </div>
        <div class="coupon-right">
            <h3 class="coupon-title">多买多省特惠</h3>
            <p class="coupon-desc">全场满 2 件及以上产品即可使用</p>
            <div class="copy-box">
                <input type="text" value="SAVE20MORE" id="couponCode" readonly>
                <button onclick="copyCoupon()" id="copyBtn">点击复制</button>
            </div>
            <p class="coupon-footer">提示：结账时输入此代码即可立减</p>
        </div>
    </div>
</div>

<style>
    .coupon-container {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 20px 0;
        display: flex;
        justify-content: center;
    }

    .coupon-card {
        width: 100%;
        max-width: 450px;
        background: #fff;
        border: 2px dashed #ff6b6b;
        border-radius: 12px;
        display: flex;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }

    .coupon-card:hover {
        transform: translateY(-5px);
    }

    .coupon-left {
        background: #ff6b6b;
        color: white;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-width: 100px;
        border-right: 1px dashed rgba(255,255,255,0.5);
    }

    .discount-amount {
        font-size: 32px;
        font-weight: bold;
    }

    .discount-type {
        font-size: 14px;
        letter-spacing: 1px;
    }

    .coupon-right {
        padding: 15px 20px;
        flex-grow: 1;
        background: #fff9f9;
    }

    .coupon-title {
        margin: 0 0 5px 0;
        color: #333;
        font-size: 18px;
    }

    .coupon-desc {
        margin: 0 0 15px 0;
        color: #666;
        font-size: 13px;
    }

    .copy-box {
        display: flex;
        border: 1px solid #ddd;
        border-radius: 6px;
        overflow: hidden;
        background: white;
    }

    #couponCode {
        border: none;
        padding: 8px 12px;
        width: 100%;
        font-weight: bold;
        color: #ff6b6b;
        font-size: 16px;
        outline: none;
    }

    #copyBtn {
        background: #333;
        color: white;
        border: none;
        padding: 8px 15px;
        cursor: pointer;
        font-size: 13px;
        white-space: nowrap;
        transition: background 0.3s;
    }

    #copyBtn:hover {
        background: #ff6b6b;
    }

    .coupon-footer {
        margin: 10px 0 0 0;
        font-size: 11px;
        color: #999;
    }

    /* 复制成功的反馈样式 */
    .copied {
        background: #4CAF50 !important;
    }
</style>

<script>
    function copyCoupon() {
        var copyText = document.getElementById("couponCode");
        copyText.select();
        copyText.setSelectionRange(0, 99999); // 针对手机端

        navigator.clipboard.writeText(copyText.value).then(() => {
            var btn = document.getElementById("copyBtn");
            const originalText = btn.innerHTML;
            btn.innerHTML = "已复制！";
            btn.classList.add("copied");

            setTimeout(() => {
                btn.innerHTML = originalText;
                btn.classList.remove("copied");
            }, 2000);
        });
    }
</script>