Skip to content
← Review Embed
Edit Review Embed
Name
Also known as (comma separated)
Brief definition
Third-party reviews rendered on the site (e.g. Google reviews).
Notes
Tier
Core
Useful
Reference
Deleted
Controls schema (JSON array)
[ { "id": "platform", "type": "select", "label": "Platform", "default": "Google", "options": [ "Google", "Trustpilot", "Facebook" ] }, { "id": "reviewerName", "type": "text", "label": "Reviewer name", "default": "Alex Rivera" }, { "id": "reviewText", "type": "text", "label": "Review text", "default": "Switched from a competitor and never looked back. Support alone is worth it." }, { "id": "reviewCount", "type": "number", "label": "Review count", "default": 482, "min": 0, "max": 99999, "step": 1 } ]
Templates (JSON object keyed by format)
{ "html": "<div class=\"review review--{{platform}}\">\n <div class=\"review__head\">\n <span class=\"review__mark\">{{platform}}</span>\n <span class=\"review__stars\" aria-label=\"5 out of 5 stars\">★★★★★</span>\n </div>\n <p class=\"review__text\">“{{reviewText}}”</p>\n <p class=\"review__meta\"><strong>{{reviewerName}}</strong> · {{reviewCount}} reviews on {{platform}}</p>\n</div>\n<style>\n.review { font: 15px system-ui, sans-serif; color: #241430; max-width: 320px; padding: 20px; border-radius: 14px; border: 1px solid #24143022; background: #FAF7F2; }\n.review__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }\n.review__mark { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 6px; color: #FAF7F2; }\n.review--Google .review__mark { background: #4285F4; }\n.review--Trustpilot .review__mark { background: #00B67A; }\n.review--Facebook .review__mark { background: #1877F2; }\n.review__stars { color: #E8A020; letter-spacing: 2px; }\n.review__text { margin: 0 0 12px; color: #241430dd; }\n.review__meta { margin: 0; font-size: 13px; color: #241430aa; }\n</style>", "tailwind": "<div class=\"review-tw review-tw--{{platform}} font-sans text-[15px] text-[#241430] max-w-[320px] p-5 rounded-2xl border border-[#24143022] bg-[#FAF7F2]\">\n <div class=\"flex items-center justify-between mb-2.5\">\n <span class=\"review-tw__mark font-extrabold text-[13px] uppercase tracking-wide px-2.5 py-0.5 rounded-md text-[#FAF7F2]\">{{platform}}</span>\n <span class=\"text-[#E8A020] tracking-widest\" aria-label=\"5 out of 5 stars\">★★★★★</span>\n </div>\n <p class=\"m-0 mb-3 text-[#241430]/85\">“{{reviewText}}”</p>\n <p class=\"m-0 text-[13px] text-[#241430]/65\"><strong>{{reviewerName}}</strong> · {{reviewCount}} reviews on {{platform}}</p>\n</div>\n<style>\n.review-tw--Google .review-tw__mark { background: #4285F4; }\n.review-tw--Trustpilot .review-tw__mark { background: #00B67A; }\n.review-tw--Facebook .review-tw__mark { background: #1877F2; }\n</style>", "react": "export function ReviewEmbed({\n platform = \"{{platform}}\",\n reviewerName = \"{{reviewerName}}\",\n reviewText = \"{{reviewText}}\",\n reviewCount = {{reviewCount}},\n}) {\n const markColor = { Google: \"#4285F4\", Trustpilot: \"#00B67A\", Facebook: \"#1877F2\" }[platform] ?? \"#4285F4\";\n return (\n <div style={{ font: \"15px system-ui, sans-serif\", color: \"#241430\", maxWidth: 320, padding: 20, borderRadius: 14,\n border: \"1px solid #24143022\", background: \"#FAF7F2\" }}>\n <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\", marginBottom: 10 }}>\n <span style={{ fontWeight: 800, fontSize: 13, textTransform: \"uppercase\", letterSpacing: \"0.04em\",\n padding: \"3px 9px\", borderRadius: 6, color: \"#FAF7F2\", background: markColor }}>{platform}</span>\n <span aria-label=\"5 out of 5 stars\" style={{ color: \"#E8A020\", letterSpacing: 2 }}>★★★★★</span>\n </div>\n <p style={{ margin: \"0 0 12px\", color: \"#241430dd\" }}>“{reviewText}”</p>\n <p style={{ margin: 0, fontSize: 13, color: \"#241430aa\" }}><strong>{reviewerName}</strong> · {reviewCount} reviews on {platform}</p>\n </div>\n );\n}" }
Save
History