Embedding tools in Salesforce as a Canvas app
Run AI Copywriter, Message Builder, Translate, Region & Tone Adapter, and other tools directly inside Sales Cloud, Service Cloud, or Marketing Cloud — without leaving the record you're working on.
What's already in place
• /embed/* route family — every supported tool has a headless URL with sidebar and topbar stripped, ready to render inside an iframe.
• Canvas signed-request parser — extracts the Salesforce user, org ID, instance URL, and OAuth token from the iframe handshake.
• Brand-aware shell — Fieldmark branding renders automatically for enterprise / franchise / manufacturer workspaces; CampusVoice for Higher-Ed.
• SFMC outbound push — proven path from a generated message to a Content Builder asset (one-click "Push to SFMC").
How Salesforce Canvas works
- You register a Connected App in Salesforce with Canvas enabled, pointing to e.g.
https://www.campusvoice.ai/embed/playground. - Salesforce loads that URL in an iframe inside Lightning, Sales Cloud, Service Cloud, or SFMC, and POSTs (or postMessages) a signed request containing the SF user, org, and an OAuth token.
- The app verifies the signed request server-side using the Connected App's consumer secret (HMAC-SHA256), then either maps the SF user to a Fieldmark / CampusVoice user, or runs in a trusted SF session without a separate login.
Recommended embed targets
| Tool | Embed route | Best Salesforce surface |
|---|---|---|
| AI Copywriter | /embed/playground | Lightning record page (Account, Lead, Opportunity), SFMC Content Builder block |
| Message Builder | /embed/build | Lightning utility bar, Campaign record page |
| Region & Tone Adapter (Fieldmark) | /embed/region-adapter | Account / Territory record page |
| Translation Tool | /embed/translate | Utility bar (always-available popout) |
| Competitive Analyzer | /embed/competitive-analyzer | Opportunity record page |
| Campaign Brief | /embed/campaign-brief | Campaign record page |
| Regional Playbook | /embed/regional-playbook | Territory / Account record page |
| Brand Audit | /embed/brand-audit | Account record page |
| Image Generator | /embed/image-generator | SFMC Content Builder, Campaign page |
| Web Analyzer | /embed/web-analyzer | Lead / Account record page |
Two deployment patterns
User logs into Fieldmark / CampusVoice once inside the iframe (Google SSO works), then it's remembered on that browser. Ships in days. Best for pilots.
Signed request → server-side verify → auto-mint a Lovable session bound to the SF user. Best UX, ~1–2 weeks of work, requires the verification edge function plus an identity-mapping table.
What still needs to be built (Pattern B)
1. Signed-request verification edge function — verifies the HMAC signature using SF_CANVAS_CONSUMER_SECRET and returns the parsed SF context. Currently parsed client-side, which is fine for prototyping but not for production.
2. SF user → Lovable identity mapping — table sf_canvas_user_links (sf_user_id, sf_org_id, profile_id, tenant_id) plus a one-time "first run" flow where the SF user picks which workspace and profile to bind to.
3. Per-tool embed pages — read pre-fill context from URL params (?recordId=001xx&accountName=Acme), hide nav/save UI we don't want in the iframe, and post results back via postMessage or the Canvas SDK.
4. Canvas SDK include — load publisher.js from the SF instance so the iframe can self-resize and call back into Salesforce.
5. CSP / X-Frame-Options — confirm Lovable hosting allows framing from *.force.com, *.salesforce.com, *.lightning.force.com, and *.exacttarget.com (SFMC).
Ready to pilot?
We typically start with Pattern A — embedding Copywriter and Translate on a single Lightning record page — so your team can validate the workflow inside Salesforce within a week. Then we layer Canvas SSO on top.