Edit Translation

Name

Also known as (comma separated)

Brief definition Content rendered in another language.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "sourceText", "type": "text", "label": "Source text (English)", "default": "Thank you for your order" }, { "id": "targetLang", "type": "select", "label": "Target language", "default": "es", "options": [ "es", "fr", "de" ] }, { "id": "reviewedByHuman", "type": "toggle", "label": "Human-reviewed", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"tr tr--{{targetLang}}\">\n <p class=\"tr__source\" lang=\"en\">EN: {{sourceText}}</p>\n <p class=\"tr__out tr__out--es\" lang=\"es\">ES: Gracias por tu pedido</p>\n <p class=\"tr__out tr__out--fr\" lang=\"fr\">FR: Merci pour votre commande</p>\n <p class=\"tr__out tr__out--de\" lang=\"de\">DE: Danke f&uuml;r Ihre Bestellung</p>\n <span class=\"tr__badge\" style=\"background:{{accent}};\">{{#if reviewedByHuman}}Human-reviewed{{/if}}{{#unless reviewedByHuman}}Machine translation{{/unless}}</span>\n</div>\n<style>\n.tr { font: 14px/1.6 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.tr__source { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: #24143010; font-size: 13px; }\n.tr__out { display: none; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #ffffff; border: 1px solid #24143018; font-size: 13px; font-weight: 600; }\n.tr--es .tr__out--es, .tr--fr .tr__out--fr, .tr--de .tr__out--de { display: block; }\n.tr__badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #241430; }\n</style>", "tailwind": "<div class=\"trtw trtw--{{targetLang}} font-sans leading-7 text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border\">\n <p class=\"m-0 mb-2.5 py-2.5 px-3 rounded-lg bg-[#24143010] text-[13px]\" lang=\"en\">EN: {{sourceText}}</p>\n <p class=\"trtw__out trtw__out--es hidden m-0 mb-3 py-2.5 px-3 rounded-lg bg-white border border-[#24143018] text-[13px] font-semibold\" lang=\"es\">ES: Gracias por tu pedido</p>\n <p class=\"trtw__out trtw__out--fr hidden m-0 mb-3 py-2.5 px-3 rounded-lg bg-white border border-[#24143018] text-[13px] font-semibold\" lang=\"fr\">FR: Merci pour votre commande</p>\n <p class=\"trtw__out trtw__out--de hidden m-0 mb-3 py-2.5 px-3 rounded-lg bg-white border border-[#24143018] text-[13px] font-semibold\" lang=\"de\">DE: Danke f&uuml;r Ihre Bestellung</p>\n <span class=\"inline-block text-[10px] font-bold py-1 px-2.5 rounded-full\" style=\"background:{{accent}};\">{{#if reviewedByHuman}}Human-reviewed{{/if}}{{#unless reviewedByHuman}}Machine translation{{/unless}}</span>\n</div>\n<style>\n.trtw--es .trtw__out--es, .trtw--fr .trtw__out--fr, .trtw--de .trtw__out--de { display: block; }\n</style>", "react": "export function Translation({\n sourceText = \"{{sourceText}}\",\n targetLang = \"{{targetLang}}\",\n reviewedByHuman = {{reviewedByHuman}},\n accent = \"{{accent}}\",\n}) {\n const outputs = { es: \"ES: Gracias por tu pedido\", fr: \"FR: Merci pour votre commande\", de: \"DE: Danke f\\u00FCr Ihre Bestellung\" };\n return (\n <div style={{ font: \"14px/1.6 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p lang=\"en\" style={{ margin: \"0 0 10px\", padding: \"10px 12px\", borderRadius: 8, background: \"#24143010\", fontSize: 13 }}>EN: {sourceText}</p>\n <p lang={targetLang} style={{ margin: \"0 0 12px\", padding: \"10px 12px\", borderRadius: 8, background: \"#ffffff\", border: \"1px solid #24143018\", fontSize: 13, fontWeight: 600 }}>{outputs[targetLang]}</p>\n <span style={{ display: \"inline-block\", fontSize: 10, fontWeight: 700, padding: \"3px 9px\", borderRadius: 999, color: \"#241430\", background: accent }}>{reviewedByHuman ? \"Human-reviewed\" : \"Machine translation\"}</span>\n </div>\n );\n}" }