Send RCS Message
The RCS message embed enables customers to preview and send RCS messages directly from your website. Perfect for sending demos.
Step 1: Backend
Create an endpoint that requests a signed token from Pinnacle. Configure the display message and send permissions.
server.ts
package.json
.env.example
import 'dotenv/config';import express from 'express';const app = express();app.use(express.json());app.get('/api/get-send-rcs-message-token', async (req, res) => {const response = await fetch('https://api.pinnacle.sh/embed/get-token', {method: 'POST',headers: {'Content-Type': 'application/json','pinnacle-api-key': process.env.PINNACLE_API_KEY!},body: JSON.stringify({// requiredagentId: process.env.AGENT_ID!,scopes: ['MESSAGES.SEND'],configuredMessage: {// requiredagentName: "Your Brand",agentIconUrl: "https://example.com/icon.png",title: "Message Title",subtitle: "Message Subtitle",basicText: "Your message content",consentText: "Message and data rates may apply.",termsUrl: "https://example.com/terms",privacyUrl: "https://example.com/privacy",// optionalimageUrl: "https://example.com/image.jpg",videoUrl: "https://example.com/video.mp4",pdfUrl: "https://example.com/document.pdf",pdfSize: 10,quickReplies: [{ type: 'trigger', title: 'Shop Now', payload: 'shop_action' },{ type: 'openUrl', title: 'Learn More', payload: 'https://example.com' },{ type: 'call', title: 'Call Support', payload: '+14155551234' },{type: 'sendLocation',title: 'Get Directions',latLong: { lat: 37.7749, lng: -122.4194 },name: 'Store Location'},{ type: 'requestUserLocation', title: 'Find Nearby' },{type: 'scheduleEvent',title: 'Add to Calendar',eventStartTime: '2025-02-21T10:00:00Z',eventEndTime: '2025-02-21T11:00:00Z',eventTitle: 'Product Demo',}]}})});const { signedToken } = await response.json();res.json({ signedToken });});app.listen(8080, () => {console.log('Server running at http://localhost:8080');});
Schema
| Field | Type | Required | Description |
|---|---|---|---|
agentId | string | Yes | Your RCS agent ID |
configuredMessage | object | Yes | Message content and layout configuration |
scopes | string[] | Yes | Permissions granted to the token |
configuredMessage
scopes
| Field | Type | Required | Description |
|---|---|---|---|
agentName | string | Yes | Display name for your RCS agent |
agentIconUrl | string | Yes | URL to your agent’s icon image |
title | string | Yes | Card title for rich messages |
subtitle | string | Yes | Supporting text under the title |
basicText | string | Yes | Plain text content for simple messages |
consentText | string | Yes | Legal consent disclosure text |
termsUrl | string | Yes | Link to your terms of service |
privacyUrl | string | Yes | Link to your privacy policy |
imageUrl | string | No | Image URL for rich media messages |
videoUrl | string | No | Video URL for rich media messages |
pdfUrl | string | No | PDF URL for rich media messages |
pdfSize | number | No | PDF file size in KB |
quickReplies | RichButton[] | No | Array of RichButton objects (max 10) |
Maximum 10 quick replies per message. See the RCS API reference for all available quick reply types.
Step 2: Frontend
Add the iframe to your page. Subscribe to the message event to listen for RCS_WIDGET_READY, then send INIT_SEND_DEMO with your signed token to initialize the embed.
<!-- Other page content --><iframeid="send_rcs"src="https://embed.pinnacle.sh/embed/v2/send-rcs-message"style="width: 100vw; height: 100vh; border: none;"></iframe><!-- Other page content --><script>const iframe = document.getElementById('send_rcs');window.addEventListener('message', async (event) => {if (event.origin !== 'https://embed.pinnacle.sh') return;if (event.data.type === 'RCS_WIDGET_READY') {// Fetch token from your backendconst res = await fetch('/api/get-send-rcs-message-token');const { signedToken } = await res.json();// Initialize the widgetiframe.contentWindow.postMessage({type: 'INIT_SEND_DEMO', // requiredsignedToken: signedToken, // requiredprimaryColor: '#16a34a'}, 'https://embed.pinnacle.sh');}});</script><!-- Other page content -->
Events
| Field | Type | Description |
|---|---|---|
INIT_SEND_DEMO | postMessage | Send signed token and configuration to initialize the widget |
RCS_WIDGET_READY | event | Iframe has loaded and is ready to receive configuration |
INIT_SEND_DEMO
RCS_WIDGET_READY
| Field | Type | Required | Description |
|---|---|---|---|
type | "INIT_SEND_DEMO" | Yes | Message type identifier |
signedToken | string | Yes | JWT token from your backend |
primaryColor | string | No | Primary color for the widget (defaults to #16a34a) |
Complete Integration
index.html
server.ts
package.json
.env.example
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>RCS Message Demo</title></head><body><iframeid="send_rcs"src="https://embed.pinnacle.sh/embed/v2/send-rcs-message"style="width: 100vw; height: 100vh; border: none;"></iframe><script>const iframe = document.getElementById('send_rcs');window.addEventListener('message', async (event) => {if (event.origin !== 'https://embed.pinnacle.sh') return;if (event.data.type === 'RCS_WIDGET_READY') {// Fetch token from your backendconst res = await fetch('/api/get-send-rcs-message-token');const { signedToken } = await res.json();// Initialize the widgetiframe.contentWindow.postMessage({type: 'INIT_SEND_DEMO', // requiredsignedToken: signedToken, // requiredprimaryColor: '#16a34a'}, 'https://embed.pinnacle.sh');}});</script></body></html>

