如何通过Weglot.translate函数创建字典实现Gorgias聊天iframe多语言翻译

1. 提前确认配置 #

先确保你的站点已经正常部署Weglot，且已经在Weglot后台把葡萄牙语、意大利语、西班牙语添加为目标翻译语言，Weglot的JS SDK已经在全站所有页面加载完成。

2. 实现逻辑说明 #

我们的实现逻辑是：

• 保留原始的英文聊天文本字典作为翻译源
• 当页面加载、或者用户切换站点语言时，调用Weglot的翻译接口批量翻译所有字典文本
• 检测到Gorgias聊天组件加载完成后，把翻译后的字典传入组件完成文本覆写
  注意：所有带{count}、{value}、{email}这类占位符的文本，要确保翻译后占位符保留，不要被替换，否则会导致变量无法正常渲染

3. 完整注入代码 #

直接把以下代码替换你原来的Gorgias聊天注入代码即可：

<script>
// 原始英文文本字典，不需要修改
const originDict = {
    "introductionText": "How can we help?",
    "offlineIntroductionText": "We'll be back tomorrow",
    "actionPostbackError": "An error occurred while processing your action. Please try again.",
    "clickToRetry": "Message not delivered. Click to retry.",
    "conversationTimestampHeaderFormat": "MMMM D",
    "fetchHistory": "Load more",
    "fetchingHistory": "Retrieving history...",
    "invalidFileError": "Only images are supported. Choose a file with a supported extension (jpg, jpeg, png, gif, or bmp).",
    "messageError": "An error occurred while sending your message. Please try again.",
    "messageIndicatorTitlePlural": "({count}) New messages",
    "messageIndicatorTitleSingular": "({count}) New message",
    "messageRelativeTimeDay": "{value}d ago",
    "messageRelativeTimeHour": "{value}h ago",
    "messageRelativeTimeJustNow": "Just now",
    "messageRelativeTimeMinute": "{value}m ago",
    "messageTimestampFormat": "h:mm A",
    "messageSending": "Sending...",
    "messageDelivered": "Delivered",
    "tapToRetry": "Message not delivered. Tap to retry.",
    "unsupportedMessageType": "Unsupported message type.",
    "unsupportedActionType": "Unsupported action type.",
    "headerText": "Gorgias Team",
    "inputPlaceholder": "Type a message...",
    "emailCapturePlaceholder": "your@email.com",
    "emailCaptureInputLabel": "Get notified by email",
    "emailCaptureOnlineTriggerText": "Leave us your email and we will reply soon.",
    "emailCaptureOnlineThanksText": "Thanks! We'll email you at {email} if you leave.",
    "emailCaptureOfflineTriggerText": "We're away, leave us your email and we'll respond shortly.",
    "emailCaptureOfflineThanksText": "Thanks {email}! We'll get back to you shortly.",
    "emailCaptureRequiredEmailPlaceholder": "Leave your email",
    "emailCaptureRequiredMessagePlaceholder": "Write your message",
    "backLabelBackInAMinute": "Back in 1 minute",
    "backLabelBackInMinutes": "Back in {value} minutes",
    "backLabelBackInAnHour": "Back in 1 hour",
    "backLabelBackInHours": "Back in {value} hours",
    "backLabelBackInDays": "Back in {value} days",
    "backLabelBackTomorrow": "Back tomorrow",
    "campaignClickToReply": "Click to reply",
    "poweredByGorgias": "Powered by Gorgias",
    "send": "Send"
}

// 翻译字典的工具函数
async function translateDict(targetLang) {
    const translatedDict = {}
    for (const [key, text] of Object.entries(originDict)) {
        // 如果是源语言（默认英文）直接返回原始文本
        if (targetLang === 'en') {
            translatedDict[key] = text
            continue
        }
        // 调用Weglot翻译接口，源语言固定为英文，可根据你的实际源语言修改
        translatedDict[key] = await Weglot.translate(text, 'en', targetLang)
    }
    return translatedDict
}

// 更新Gorgias聊天文本的函数
async function updateGorgiasTexts() {
    // 获取当前Weglot激活的语言
    const currentLang = Weglot.getCurrentLang()
    const translatedDict = await translateDict(currentLang)
    // 检测Gorgias是否加载完成
    if (window.GorgiasChat && GorgiasChat.hasOwnProperty("updateTexts")) {
        window.GORGIAS_CHAT_TEXTS = translatedDict
        GorgiasChat.updateTexts(translatedDict)
    }
}

// 页面加载完成后首次执行
window.addEventListener('load', updateGorgiasTexts)

// 监听Weglot语言切换事件，切换时更新聊天文本
Weglot.on('languageChanged', updateGorgiasTexts)

// 兼容Gorgias组件延迟加载的情况，轮询检测直到组件加载完成
const gorgiasChatInterval = window.setInterval(async function() {
    if (window.GorgiasChat && GorgiasChat.hasOwnProperty("updateTexts") && window.Weglot) {
        window.clearInterval(gorgiasChatInterval);
        await updateGorgiasTexts()
    }
}, 100);
</script>

4. 效果验证 #

• 分别切换站点语言为葡萄牙语、意大利语、西班牙语，打开聊天窗口检查所有文本是否正常翻译为对应语言
• 测试聊天在线、离线两种状态的提示文本、邮件收集相关文本、消息发送状态文本是否显示正常
• 检查带占位符的文本（比如新消息提醒、客服返回倒计时）的变量是否可以正常替换，没有出现占位符丢失的情况
  如果出现部分翻译不准确的情况，可以直接在Weglot后台搜索对应英文文本，手动修改翻译结果即可。

内容的提问来源于stack exchange，提问作者Carolina Aguiar