Skip to content

Commit

Permalink
Add blog post on how to connect with zappier
Browse files Browse the repository at this point in the history
  • Loading branch information
AchoArnold committed Nov 29, 2023
1 parent 1d6d785 commit 8db67eb
Show file tree
Hide file tree
Showing 11 changed files with 315 additions and 38 deletions.
10 changes: 10 additions & 0 deletions web/assets/img/zapier-logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
"@nuxtjs/stylelint-module": "^5.1.0",
"@nuxtjs/vuetify": "^1.12.3",
"@vue/test-utils": "^1.3.6",
"axios": "^1.6.0",
"axios": "^0.25.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^29.7.0",
"eslint": "^8.53.0",
Expand Down
13 changes: 13 additions & 0 deletions web/pages/blog/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,19 @@ export default {
mdiTwitter,
mdiGithub,
blogPosts: [
{
route:
'/blog/send-sms-when-new-row-is-added-to-google-sheets-using-zapier',
title:
'Send an SMS when a new row is added to Google Sheets using Zapier',
date: 'November 29, 2023',
readTime: '7 min read',
authorImage: require('@/assets/img/arnold.png'),
description:
'Automate sending personalized SMS messages each time a new row is added to your Google Sheets document using Zapier without writing code.',
authorName: 'Acho Arnold',
authorTwitter: 'acho_arnold',
},
{
route: '/blog/how-to-send-sms-messages-from-excel',
title:
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,242 @@
<template>
<v-container class="pt-8">
<v-row class="mt-16">
<v-col cols="12" md="9">
<h1
class="mt-1"
:class="{
'text-h2': $vuetify.breakpoint.mdAndUp,
'text-h3': !$vuetify.breakpoint.mdAndUp,
}"
>
Send an SMS message when a new row is added to Google Sheets using
Zapier
</h1>
<p class="subtitle-2 mt-2">
<span class="text-uppercase blue--text">{{ postDate }}</span>
• <span class="text-uppercase">{{ readTime }}</span>
</p>
<p class="text--secondary subtitle-1 mt-2">
Automate sending personalized SMS messages each time a new row is
added to your Google Sheets document using Zapier. You don't need to
write any code to make this happen and you can personalize the SMS
messages which are sent out.
</p>
<h3 class="text-h4 mt-8 mb-2">Prerequisites</h3>
<ul>
<li>Basic understanding of Google Sheets.</li>
<li>Basic understanding of Zapier.</li>
<li>
An account on
<router-link to="/login" class="text-decoration-none"
>httpsms.com</router-link
>
</li>
</ul>
<h3 class="text-h4 mt-8 mb-2">Step 1: Create trigger on Zapier</h3>
<p>
Create a new Zap on Zapier and select Google Sheets as the trigger.
The event name should be <b>"New Spreadsheet Row"</b> if you want to
send an SMS message every time a new row is added to your Google
Sheets document.
</p>
<vue-glow
color="#329ef4"
mode="hex"
elevation="14"
:intensity="1.07"
intense
>
<v-img
style="border-radius: 4px"
alt="httpsms.com settings page"
:src="
require('~/static/img/blog/send-sms-when-new-row-is-added-to-google-sheets-using-zapier/zapier-trigger.png')
"
></v-img>
</vue-glow>
<p class="mt-8">
On the Zap, select the <b>Spreadsheet</b> which you have on google
drive and make sure to select the correct <b>Worksheet</b>.
</p>
<v-alert type="info" outlined>
In the sample spreadsheet below, we are mimicking an e-commerce store.
The first column contains the name of the customer, the second column
is the name of the product which was bought and the third column is
the phone number of the customer who made the purchase. You can use
your own custom spreadsheet with your own set of columns.
</v-alert>
<vue-glow
color="#329ef4"
mode="hex"
elevation="14"
:intensity="1.07"
intense
>
<v-img
style="border-radius: 4px"
alt="httpsms.com settings page"
:src="
require('@/static/img/blog/send-sms-when-new-row-is-added-to-google-sheets-using-zapier/google-sheets.png')
"
></v-img>
</vue-glow>
<h3 class="text-h4 mt-8 mb-2">Step 2: Create an action on Zapier</h3>
<p>
An action is what happens after the trigger. In this case, we want to
send an SMS message to the customer who made the purchase. Select
<b>Webhooks By Zapier</b> as the action app and select
<b>Custom Request</b> as the action event.
</p>
<vue-glow
color="#329ef4"
mode="hex"
elevation="14"
:intensity="1.07"
intense
>
<v-img
style="border-radius: 4px"
alt="httpsms.com settings page"
:src="
require('@/static/img/blog/send-sms-when-new-row-is-added-to-google-sheets-using-zapier/zapier-action-event.png')
"
></v-img>
</vue-glow>
<p class="mt-8">
On the <b>Action</b> section in Zapier, set the Method to
<code>Post</code>. Set the URL to
<code>https://api.httpsms.com/v1/messages/send</code>. Set the `Data
Pass-Through` to <code>false</code>. In the Data field, add the
following JSON payload.
</p>
<pre v-highlight class="json w-full mt-n2 mb-n13">
<code>
{
"content": "Hello [Name]\nThanks for ordering [Product] via our shopify store. Your order will be shipped today!",
"from": "+18005550199",
"to": "[ToPhoneNumber]"
}
</code>
</pre>
<v-alert type="info" class="mt-4" outlined>
In the JSON message above, we are mimicking an e-commerce store. The
<code>[Name]</code> variable contains the name of the customer on the
spreadsheet. <code>[Product]</code> contains the name of the product
which was bought and <code>[ToPhoneNumber]</code> contains the phone
number of the customer who made the purchase. You can use your own
custom message with your own set of variables according to your
spreadsheet. Change the <code>from</code> field to the phone number
which you registered on httpsms.com.
</v-alert>
<p class="mt-8">
On the headers section add a new header called
<code>x-api-key</code> and the value of this header should be your API
key on
<nuxt-link class="text-decoration-none" to="/settings"
>httpsms.com</nuxt-link
>
and you can copy your API key from the settings page<nuxt-link
class="text-decoration-none"
to="/settings"
>https://httpsms.com/settings</nuxt-link
>.
</p>
<p>
Also add a new header called <code>Content-Type</code> and the value
of this header should be <code>application/json</code>
</p>
<p>
The final configuration of the action should look like the screenshot
below.
</p>
<vue-glow
color="#329ef4"
mode="hex"
elevation="14"
:intensity="1.07"
intense
>
<v-img
style="border-radius: 4px"
alt="httpsms.com settings page"
:src="
require('@/static/img/blog/send-sms-when-new-row-is-added-to-google-sheets-using-zapier/zapier-action-action.png')
"
></v-img>
</vue-glow>

<h3 class="text-h4 mb-4 mt-16">Conclusion</h3>
<p>
Publish your zap and you will automatically trigger httpsms to send an
SMS to your customer when ever you add a new row in the google sheet.
Don't hesitate to
<a class="text-decoration-none" href="mailto:[email protected]"
>contact us</a
>
if you face any issues configuring your zap to send SMS messages from
your Google Sheets by following this tutorial.
</p>
<p>Until the next time✌️</p>
<blog-author-bio></blog-author-bio>
<v-divider class="mx-16"></v-divider>
<div class="text-center mt-8 mb-4">
<back-button></back-button>
</div>
</v-col>
<v-col v-if="$vuetify.breakpoint.mdAndUp" md="3">
<blog-info></blog-info>
</v-col>
</v-row>
</v-container>
</template>

<script lang="ts">
import { mdiTwitter, mdiCommentTextMultipleOutline } from '@mdi/js'
export default {
name: 'SendSmsWhenNewRowIsAddedToGoogleSheetsUsingZapier',
layout: 'website',
data() {
return {
mdiTwitter,
mdiCommentTextMultipleOutline,
authorImage: require('@/assets/img/arnold.png'),
authorName: 'Acho Arnold',
postDate: 'October 29, 2023',
readTime: '5 min read',
authorTwitter: 'acho_arnold',
}
},
head() {
return {
title:
'How to send SMS messages to multiple phone numbers from Excel - httpSMS',
meta: [
{
hid: 'og:title',
property: 'og:title',
content:
'How to send SMS messages to multiple phone numbers from Excel',
},
{
hid: 'og:description',
property: 'og:description',
content:
'Configure your Android phone as an SMS gateway to automate sending text messages with the Python programing language.',
},
{
hid: 'twitter:card',
name: 'twitter:card',
content: 'summary_large_image',
},
{
hid: 'og:url',
property: 'og:url',
content:
'https://httpsms.com/blog/how-to-send-sms-messages-from-excel',
},
],
}
},
}
</script>
53 changes: 43 additions & 10 deletions web/pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@
</v-btn>
</div>
<p class="text-body-2 mt-2">
⚡Trusted by <b>2,208+</b> happy users who have sent or received
more than <b>401,881+</b> messages.
⚡Trusted by <b>2,247+</b> happy users who have sent or received
more than <b>417,220+</b> messages.
</p>
<div
class="mt-4"
Expand Down Expand Up @@ -130,7 +130,40 @@
</v-col>
</v-row>
<v-row class="mb-16">
<v-col cols="12" md="6" class="d-flex align-center">
<v-col cols="12" md="6" class="d-flex align-center" :order-lg="1">
<div>
<h3 class="text-h3 mb-1">
Integrations
<v-chip class="ma-2" color="pink" label text-color="white">
<v-icon left>{{ mdiLabel }}</v-icon>
No code
</v-chip>
</h3>
<h5 class="text-h6 font-weight-light">
Connect your workflow with thousands of other apps with the
power of Zapier. For example you can setup an automation to send
personalized SMS messages each time someone makes an order from
your shopify store or each time a new row is added to a Google
spreadsheet.
</h5>
<v-btn
to="/blog/send-sms-when-new-row-is-added-to-google-sheets-using-zapier"
class="primary"
>Zapier Integration Guide</v-btn
>
</div>
</v-col>
<v-col cols="12" md="6" :order-lg="2">
<v-img
class="mb-4"
max-height="400"
contain
:src="require('assets/img/zapier-logo.svg')"
></v-img>
</v-col>
</v-row>
<v-row class="mb-16">
<v-col cols="12" md="6" class="d-flex align-center" :order-lg="2">
<div>
<h3 class="text-h3 mb-1">Webhooks</h3>
<h5 class="text-h6 font-weight-light">
Expand All @@ -141,7 +174,7 @@
</h5>
</div>
</v-col>
<v-col cols="12" md="6">
<v-col cols="12" md="6" :order-lg="1">
<v-img
class="mb-4"
max-height="300"
Expand All @@ -151,7 +184,7 @@
</v-col>
</v-row>
<v-row class="mb-16">
<v-col cols="12" md="6" class="d-flex align-center" order-md="2">
<v-col cols="12" md="6" class="d-flex align-center" :order-lg="1">
<div>
<h3 class="text-h3 mb-1">Control Sending</h3>
<h5 class="text-h6 font-weight-light">
Expand All @@ -161,7 +194,7 @@
</h5>
</div>
</v-col>
<v-col cols="12" md="6" order-md="1">
<v-col cols="12" md="6" :order-lg="2">
<v-img
class="mb-4"
max-height="300"
Expand All @@ -171,7 +204,7 @@
</v-col>
</v-row>
<v-row class="mb-16">
<v-col cols="12" md="6" class="d-flex align-center">
<v-col cols="12" md="6" class="d-flex align-center" :order-lg="2">
<div>
<h3 class="text-h3 mb-1">Monitoring</h3>
<h5 class="text-h6 font-weight-light">
Expand All @@ -180,7 +213,7 @@
</h5>
</div>
</v-col>
<v-col cols="12" md="6" :order-md="1">
<v-col cols="12" md="6" :order-lg="1">
<v-img
class="mb-4"
max-height="300"
Expand All @@ -190,7 +223,7 @@
</v-col>
</v-row>
<v-row class="mt-16">
<v-col cols="12" md="6" class="d-flex align-center" order-md="2">
<v-col cols="12" md="6" class="d-flex align-center" :order-lg="1">
<div>
<h3 class="text-h3 mb-1">Open Source</h3>
<h5 class="text-h6 mb-3 font-weight-light">
Expand All @@ -209,7 +242,7 @@
</a>
</div>
</v-col>
<v-col cols="12" md="6" order-md="1">
<v-col cols="12" md="6" :order-lg="2">
<v-img
class="mb-4"
max-height="400"
Expand Down
Loading

0 comments on commit 8db67eb

Please sign in to comment.