Send RCS Message

The RCS message embed enables customers to preview and send RCS messages directly from your website. Perfect for sending demos.

Send RCS Message

Step 1: Backend

Create an endpoint that requests a signed token from Pinnacle. Configure the display message and send permissions.

1import 'dotenv/config';
2import express from 'express';
3
4const app = express();
5app.use(express.json());
6
7app.get('/api/get-send-rcs-message-token', async (req, res) => {
8 const response = await fetch('https://api.pinnacle.sh/embed/get-token', {
9 method: 'POST',
10 headers: {
11 'Content-Type': 'application/json',
12 'pinnacle-api-key': process.env.PINNACLE_API_KEY!
13 },
14 body: JSON.stringify({
15 // required
16 agentId: process.env.AGENT_ID!,
17 scopes: ['MESSAGES.SEND'],
18 configuredMessage: {
19 // required
20 agentName: "Your Brand",
21 agentIconUrl: "https://example.com/icon.png",
22 title: "Message Title",
23 subtitle: "Message Subtitle",
24 basicText: "Your message content",
25 consentText: "Message and data rates may apply.",
26 termsUrl: "https://example.com/terms",
27 privacyUrl: "https://example.com/privacy",
28
29 // optional
30 imageUrl: "https://example.com/image.jpg",
31 videoUrl: "https://example.com/video.mp4",
32 pdfUrl: "https://example.com/document.pdf",
33 pdfSize: 10,
34 quickReplies: [
35 { type: 'trigger', title: 'Shop Now', payload: 'shop_action' },
36 { type: 'openUrl', title: 'Learn More', payload: 'https://example.com' },
37 { type: 'call', title: 'Call Support', payload: '+14155551234' },
38 {
39 type: 'sendLocation',
40 title: 'Get Directions',
41 latLong: { lat: 37.7749, lng: -122.4194 },
42 name: 'Store Location'
43 },
44 { type: 'requestUserLocation', title: 'Find Nearby' },
45 {
46 type: 'scheduleEvent',
47 title: 'Add to Calendar',
48 eventStartTime: '2025-02-21T10:00:00Z',
49 eventEndTime: '2025-02-21T11:00:00Z',
50 eventTitle: 'Product Demo',
51 }
52 ]
53 }
54 })
55 });
56
57 const { signedToken } = await response.json();
58 res.json({ signedToken });
59});
60
61app.listen(8080, () => {
62 console.log('Server running at http://localhost:8080');
63});

Schema

FieldTypeRequiredDescription
agentIdstringYesYour RCS agent ID
configuredMessageobjectYesMessage content and layout configuration
scopesstring[]YesPermissions granted to the token

FieldTypeRequiredDescription
agentNamestringYesDisplay name for your RCS agent
agentIconUrlstringYesURL to your agent’s icon image
titlestringYesCard title for rich messages
subtitlestringYesSupporting text under the title
basicTextstringYesPlain text content for simple messages
consentTextstringYesLegal consent disclosure text
termsUrlstringYesLink to your terms of service
privacyUrlstringYesLink to your privacy policy
imageUrlstringNoImage URL for rich media messages
videoUrlstringNoVideo URL for rich media messages
pdfUrlstringNoPDF URL for rich media messages
pdfSizenumberNoPDF file size in KB
quickRepliesRichButton[]NoArray 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.

1<!-- Other page content -->
2
3<iframe
4 id="send_rcs"
5 src="https://embed.pinnacle.sh/embed/v2/send-rcs-message"
6 style="width: 100vw; height: 100vh; border: none;">
7</iframe>
8
9<!-- Other page content -->
10
11<script>
12 const iframe = document.getElementById('send_rcs');
13
14 window.addEventListener('message', async (event) => {
15 if (event.origin !== 'https://embed.pinnacle.sh') return;
16
17 if (event.data.type === 'RCS_WIDGET_READY') {
18 // Fetch token from your backend
19 const res = await fetch('/api/get-send-rcs-message-token');
20 const { signedToken } = await res.json();
21
22 // Initialize the widget
23 iframe.contentWindow.postMessage({
24 type: 'INIT_SEND_DEMO', // required
25 signedToken: signedToken, // required
26 primaryColor: '#16a34a'
27 }, 'https://embed.pinnacle.sh');
28 }
29 });
30</script>
31
32<!-- Other page content -->

Events

FieldTypeDescription
INIT_SEND_DEMOpostMessageSend signed token and configuration to initialize the widget
RCS_WIDGET_READYeventIframe has loaded and is ready to receive configuration

FieldTypeRequiredDescription
type"INIT_SEND_DEMO"YesMessage type identifier
signedTokenstringYesJWT token from your backend
primaryColorstringNoPrimary color for the widget (defaults to #16a34a)

Complete Integration

1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>RCS Message Demo</title>
7</head>
8<body>
9 <iframe
10 id="send_rcs"
11 src="https://embed.pinnacle.sh/embed/v2/send-rcs-message"
12 style="width: 100vw; height: 100vh; border: none;">
13 </iframe>
14
15 <script>
16 const iframe = document.getElementById('send_rcs');
17
18 window.addEventListener('message', async (event) => {
19 if (event.origin !== 'https://embed.pinnacle.sh') return;
20
21 if (event.data.type === 'RCS_WIDGET_READY') {
22 // Fetch token from your backend
23 const res = await fetch('/api/get-send-rcs-message-token');
24 const { signedToken } = await res.json();
25
26 // Initialize the widget
27 iframe.contentWindow.postMessage({
28 type: 'INIT_SEND_DEMO', // required
29 signedToken: signedToken, // required
30 primaryColor: '#16a34a'
31 }, 'https://embed.pinnacle.sh');
32 }
33 });
34 </script>
35</body>
36</html>