Skip to content

Commit 8db67eb

Browse files
AchoArnoldAchoArnold
committed
Add blog post on how to connect with zappier
1 parent 1d6d785 commit 8db67eb

11 files changed

Lines changed: 315 additions & 38 deletions

File tree

‎web/assets/img/zapier-logo.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
"@nuxtjs/stylelint-module": "^5.1.0",
6161
"@nuxtjs/vuetify": "^1.12.3",
6262
"@vue/test-utils": "^1.3.6",
63-
"axios": "^1.6.0",
63+
"axios": "^0.25.0",
6464
"babel-core": "7.0.0-bridge.0",
6565
"babel-jest": "^29.7.0",
6666
"eslint": "^8.53.0",

‎web/pages/blog/index.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,19 @@ export default {
6565
mdiTwitter,
6666
mdiGithub,
6767
blogPosts: [
68+
{
69+
route:
70+
'/blog/send-sms-when-new-row-is-added-to-google-sheets-using-zapier',
71+
title:
72+
'Send an SMS when a new row is added to Google Sheets using Zapier',
73+
date: 'November 29, 2023',
74+
readTime: '7 min read',
75+
authorImage: require('@/assets/img/arnold.png'),
76+
description:
77+
'Automate sending personalized SMS messages each time a new row is added to your Google Sheets document using Zapier without writing code.',
78+
authorName: 'Acho Arnold',
79+
authorTwitter: 'acho_arnold',
80+
},
6881
{
6982
route: '/blog/how-to-send-sms-messages-from-excel',
7083
title:

‎web/pages/blog/send-sms-when-new-row-is-added-to-google-sheets-using-zapier.vue‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
<template>
2+
<v-container class="pt-8">
3+
<v-row class="mt-16">
4+
<v-col cols="12" md="9">
5+
<h1
6+
class="mt-1"
7+
:class="{
8+
'text-h2': $vuetify.breakpoint.mdAndUp,
9+
'text-h3': !$vuetify.breakpoint.mdAndUp,
10+
}"
11+
>
12+
Send an SMS message when a new row is added to Google Sheets using
13+
Zapier
14+
</h1>
15+
<p class="subtitle-2 mt-2">
16+
<span class="text-uppercase blue--text">{{ postDate }}</span>
17+
• <span class="text-uppercase">{{ readTime }}</span>
18+
</p>
19+
<p class="text--secondary subtitle-1 mt-2">
20+
Automate sending personalized SMS messages each time a new row is
21+
added to your Google Sheets document using Zapier. You don't need to
22+
write any code to make this happen and you can personalize the SMS
23+
messages which are sent out.
24+
</p>
25+
<h3 class="text-h4 mt-8 mb-2">Prerequisites</h3>
26+
<ul>
27+
<li>Basic understanding of Google Sheets.</li>
28+
<li>Basic understanding of Zapier.</li>
29+
<li>
30+
An account on
31+
<router-link to="/login" class="text-decoration-none"
32+
>httpsms.com</router-link
33+
>
34+
</li>
35+
</ul>
36+
<h3 class="text-h4 mt-8 mb-2">Step 1: Create trigger on Zapier</h3>
37+
<p>
38+
Create a new Zap on Zapier and select Google Sheets as the trigger.
39+
The event name should be <b>"New Spreadsheet Row"</b> if you want to
40+
send an SMS message every time a new row is added to your Google
41+
Sheets document.
42+
</p>
43+
<vue-glow
44+
color="#329ef4"
45+
mode="hex"
46+
elevation="14"
47+
:intensity="1.07"
48+
intense
49+
>
50+
<v-img
51+
style="border-radius: 4px"
52+
alt="httpsms.com settings page"
53+
:src="
54+
require('~/static/img/blog/send-sms-when-new-row-is-added-to-google-sheets-using-zapier/zapier-trigger.png')
55+
"
56+
></v-img>
57+
</vue-glow>
58+
<p class="mt-8">
59+
On the Zap, select the <b>Spreadsheet</b> which you have on google
60+
drive and make sure to select the correct <b>Worksheet</b>.
61+
</p>
62+
<v-alert type="info" outlined>
63+
In the sample spreadsheet below, we are mimicking an e-commerce store.
64+
The first column contains the name of the customer, the second column
65+
is the name of the product which was bought and the third column is
66+
the phone number of the customer who made the purchase. You can use
67+
your own custom spreadsheet with your own set of columns.
68+
</v-alert>
69+
<vue-glow
70+
color="#329ef4"
71+
mode="hex"
72+
elevation="14"
73+
:intensity="1.07"
74+
intense
75+
>
76+
<v-img
77+
style="border-radius: 4px"
78+
alt="httpsms.com settings page"
79+
:src="
80+
require('@/static/img/blog/send-sms-when-new-row-is-added-to-google-sheets-using-zapier/google-sheets.png')
81+
"
82+
></v-img>
83+
</vue-glow>
84+
<h3 class="text-h4 mt-8 mb-2">Step 2: Create an action on Zapier</h3>
85+
<p>
86+
An action is what happens after the trigger. In this case, we want to
87+
send an SMS message to the customer who made the purchase. Select
88+
<b>Webhooks By Zapier</b> as the action app and select
89+
<b>Custom Request</b> as the action event.
90+
</p>
91+
<vue-glow
92+
color="#329ef4"
93+
mode="hex"
94+
elevation="14"
95+
:intensity="1.07"
96+
intense
97+
>
98+
<v-img
99+
style="border-radius: 4px"
100+
alt="httpsms.com settings page"
101+
:src="
102+
require('@/static/img/blog/send-sms-when-new-row-is-added-to-google-sheets-using-zapier/zapier-action-event.png')
103+
"
104+
></v-img>
105+
</vue-glow>
106+
<p class="mt-8">
107+
On the <b>Action</b> section in Zapier, set the Method to
108+
<code>Post</code>. Set the URL to
109+
<code>https://api.httpsms.com/v1/messages/send</code>. Set the `Data
110+
Pass-Through` to <code>false</code>. In the Data field, add the
111+
following JSON payload.
112+
</p>
113+
<pre v-highlight class="json w-full mt-n2 mb-n13">
114+
<code>
115+
{
116+
"content": "Hello [Name]\nThanks for ordering [Product] via our shopify store. Your order will be shipped today!",
117+
"from": "+18005550199",
118+
"to": "[ToPhoneNumber]"
119+
}
120+
</code>
121+
</pre>
122+
<v-alert type="info" class="mt-4" outlined>
123+
In the JSON message above, we are mimicking an e-commerce store. The
124+
<code>[Name]</code> variable contains the name of the customer on the
125+
spreadsheet. <code>[Product]</code> contains the name of the product
126+
which was bought and <code>[ToPhoneNumber]</code> contains the phone
127+
number of the customer who made the purchase. You can use your own
128+
custom message with your own set of variables according to your
129+
spreadsheet. Change the <code>from</code> field to the phone number
130+
which you registered on httpsms.com.
131+
</v-alert>
132+
<p class="mt-8">
133+
On the headers section add a new header called
134+
<code>x-api-key</code> and the value of this header should be your API
135+
key on
136+
<nuxt-link class="text-decoration-none" to="/settings"
137+
>httpsms.com</nuxt-link
138+
>
139+
and you can copy your API key from the settings page<nuxt-link
140+
class="text-decoration-none"
141+
to="/settings"
142+
>https://httpsms.com/settings</nuxt-link
143+
>.
144+
</p>
145+
<p>
146+
Also add a new header called <code>Content-Type</code> and the value
147+
of this header should be <code>application/json</code>
148+
</p>
149+
<p>
150+
The final configuration of the action should look like the screenshot
151+
below.
152+
</p>
153+
<vue-glow
154+
color="#329ef4"
155+
mode="hex"
156+
elevation="14"
157+
:intensity="1.07"
158+
intense
159+
>
160+
<v-img
161+
style="border-radius: 4px"
162+
alt="httpsms.com settings page"
163+
:src="
164+
require('@/static/img/blog/send-sms-when-new-row-is-added-to-google-sheets-using-zapier/zapier-action-action.png')
165+
"
166+
></v-img>
167+
</vue-glow>
168+
169+
<h3 class="text-h4 mb-4 mt-16">Conclusion</h3>
170+
<p>
171+
Publish your zap and you will automatically trigger httpsms to send an
172+
SMS to your customer when ever you add a new row in the google sheet.
173+
Don't hesitate to
174+
<a class="text-decoration-none" href="mailto:arnold@httpsms.com"
175+
>contact us</a
176+
>
177+
if you face any issues configuring your zap to send SMS messages from
178+
your Google Sheets by following this tutorial.
179+
</p>
180+
<p>Until the next time✌️</p>
181+
<blog-author-bio></blog-author-bio>
182+
<v-divider class="mx-16"></v-divider>
183+
<div class="text-center mt-8 mb-4">
184+
<back-button></back-button>
185+
</div>
186+
</v-col>
187+
<v-col v-if="$vuetify.breakpoint.mdAndUp" md="3">
188+
<blog-info></blog-info>
189+
</v-col>
190+
</v-row>
191+
</v-container>
192+
</template>
193+
194+
<script lang="ts">
195+
import { mdiTwitter, mdiCommentTextMultipleOutline } from '@mdi/js'
196+
export default {
197+
name: 'SendSmsWhenNewRowIsAddedToGoogleSheetsUsingZapier',
198+
layout: 'website',
199+
data() {
200+
return {
201+
mdiTwitter,
202+
mdiCommentTextMultipleOutline,
203+
authorImage: require('@/assets/img/arnold.png'),
204+
authorName: 'Acho Arnold',
205+
postDate: 'October 29, 2023',
206+
readTime: '5 min read',
207+
authorTwitter: 'acho_arnold',
208+
}
209+
},
210+
head() {
211+
return {
212+
title:
213+
'How to send SMS messages to multiple phone numbers from Excel - httpSMS',
214+
meta: [
215+
{
216+
hid: 'og:title',
217+
property: 'og:title',
218+
content:
219+
'How to send SMS messages to multiple phone numbers from Excel',
220+
},
221+
{
222+
hid: 'og:description',
223+
property: 'og:description',
224+
content:
225+
'Configure your Android phone as an SMS gateway to automate sending text messages with the Python programing language.',
226+
},
227+
{
228+
hid: 'twitter:card',
229+
name: 'twitter:card',
230+
content: 'summary_large_image',
231+
},
232+
{
233+
hid: 'og:url',
234+
property: 'og:url',
235+
content:
236+
'https://httpsms.com/blog/how-to-send-sms-messages-from-excel',
237+
},
238+
],
239+
}
240+
},
241+
}
242+
</script>

‎web/pages/index.vue‎

Lines changed: 43 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@
5050
</v-btn>
5151
</div>
5252
<p class="text-body-2 mt-2">
53-
⚡Trusted by <b>2,208+</b> happy users who have sent or received
54-
more than <b>401,881+</b> messages.
53+
⚡Trusted by <b>2,247+</b> happy users who have sent or received
54+
more than <b>417,220+</b> messages.
5555
</p>
5656
<div
5757
class="mt-4"
@@ -130,7 +130,40 @@
130130
</v-col>
131131
</v-row>
132132
<v-row class="mb-16">
133-
<v-col cols="12" md="6" class="d-flex align-center">
133+
<v-col cols="12" md="6" class="d-flex align-center" :order-lg="1">
134+
<div>
135+
<h3 class="text-h3 mb-1">
136+
Integrations
137+
<v-chip class="ma-2" color="pink" label text-color="white">
138+
<v-icon left>{{ mdiLabel }}</v-icon>
139+
No code
140+
</v-chip>
141+
</h3>
142+
<h5 class="text-h6 font-weight-light">
143+
Connect your workflow with thousands of other apps with the
144+
power of Zapier. For example you can setup an automation to send
145+
personalized SMS messages each time someone makes an order from
146+
your shopify store or each time a new row is added to a Google
147+
spreadsheet.
148+
</h5>
149+
<v-btn
150+
to="/blog/send-sms-when-new-row-is-added-to-google-sheets-using-zapier"
151+
class="primary"
152+
>Zapier Integration Guide</v-btn
153+
>
154+
</div>
155+
</v-col>
156+
<v-col cols="12" md="6" :order-lg="2">
157+
<v-img
158+
class="mb-4"
159+
max-height="400"
160+
contain
161+
:src="require('assets/img/zapier-logo.svg')"
162+
></v-img>
163+
</v-col>
164+
</v-row>
165+
<v-row class="mb-16">
166+
<v-col cols="12" md="6" class="d-flex align-center" :order-lg="2">
134167
<div>
135168
<h3 class="text-h3 mb-1">Webhooks</h3>
136169
<h5 class="text-h6 font-weight-light">
@@ -141,7 +174,7 @@
141174
</h5>
142175
</div>
143176
</v-col>
144-
<v-col cols="12" md="6">
177+
<v-col cols="12" md="6" :order-lg="1">
145178
<v-img
146179
class="mb-4"
147180
max-height="300"
@@ -151,7 +184,7 @@
151184
</v-col>
152185
</v-row>
153186
<v-row class="mb-16">
154-
<v-col cols="12" md="6" class="d-flex align-center" order-md="2">
187+
<v-col cols="12" md="6" class="d-flex align-center" :order-lg="1">
155188
<div>
156189
<h3 class="text-h3 mb-1">Control Sending</h3>
157190
<h5 class="text-h6 font-weight-light">
@@ -161,7 +194,7 @@
161194
</h5>
162195
</div>
163196
</v-col>
164-
<v-col cols="12" md="6" order-md="1">
197+
<v-col cols="12" md="6" :order-lg="2">
165198
<v-img
166199
class="mb-4"
167200
max-height="300"
@@ -171,7 +204,7 @@
171204
</v-col>
172205
</v-row>
173206
<v-row class="mb-16">
174-
<v-col cols="12" md="6" class="d-flex align-center">
207+
<v-col cols="12" md="6" class="d-flex align-center" :order-lg="2">
175208
<div>
176209
<h3 class="text-h3 mb-1">Monitoring</h3>
177210
<h5 class="text-h6 font-weight-light">
@@ -180,7 +213,7 @@
180213
</h5>
181214
</div>
182215
</v-col>
183-
<v-col cols="12" md="6" :order-md="1">
216+
<v-col cols="12" md="6" :order-lg="1">
184217
<v-img
185218
class="mb-4"
186219
max-height="300"
@@ -190,7 +223,7 @@
190223
</v-col>
191224
</v-row>
192225
<v-row class="mt-16">
193-
<v-col cols="12" md="6" class="d-flex align-center" order-md="2">
226+
<v-col cols="12" md="6" class="d-flex align-center" :order-lg="1">
194227
<div>
195228
<h3 class="text-h3 mb-1">Open Source</h3>
196229
<h5 class="text-h6 mb-3 font-weight-light">
@@ -209,7 +242,7 @@
209242
</a>
210243
</div>
211244
</v-col>
212-
<v-col cols="12" md="6" order-md="1">
245+
<v-col cols="12" md="6" :order-lg="2">
213246
<v-img
214247
class="mb-4"
215248
max-height="400"

0 commit comments

Comments
 (0)