Blog Comment Notifications

Get a notification by E-Mail when a comment is left on your blog

Last updated by Red Cap Tom on April 24, 2020 at 23:43 +0300

Introduction

Shopify's blog commenting system does not support comment notifications at the time of writing. After catching a glimpse of the problem in a Shopify Community thread, I decided to hack together a solution using a service I love called Integromat.

A note

If you don't want to go through the whole process yourself, I can set it up for you on my personal Integromat account. I will make sure it runs at all times, fix any bugs as they come up, and add any additional features as I come up with them. If you'd like me to do that, e-mail me at hey@redcaptom.com and we can discuss the price (it will be monthly, but it won't be high).

Setup a blog in your Shopify store

If you haven't already done so, you need to create a blog on your Shopify store.

  1. From your Shopify admin, go to Online Store > Blog Posts.
  2. Click Manage blogs.
  3. Click Add blog.
  4. Give your blog a title, and then select how you want to manage comments. Make sure you choose allowed and automatically published in the settings of your blog - this trick only works if you do not moderate your comments (see here for more information)
  5. Click Save blog.

See here for more information about adding a blog to your Shopify store.

Setup Integromat

Integromat is a service that allows you to connect one online service to another. So, for example, you could connect your Youtube channel to your Twitter account, so that when you publish a new video it is also tweeted from your account at the same time.

It's also perfect for our use case since it allows the use of webhooks and email. For the purposes of this tutorial, a webhook is just a URL you go to. That URL then triggers some action to happen (in our case, the sending of an email).

Let's dive in:

  1. Sign up to Integromat with your Google account
  2. Click Create a New Scenario from the blue button on the top right, after you've logged in
  3. Search for Webhooks and select it
  4. Search for Email and select it
  5. Click the arrow to continue
  6. In the new Scenario window that will open up , click the big white question mark, and select Webhooks –> Custom webhook
  7. Click add to create a new webhook
  8. Use New Shopify Blog Comment Webhook for the webhook name, and leave the IP restrictions part empty (we don't have any in this case)
  9. Click Copy address to clipboard and take note of this address - you'll need it later
  10. Click OK, and then add another module
  11. Choose E-Mail –> Send an e-mail
  12. Add a connection, with connection type Google (it will then ask you to re-login to google). The login message is quite scary (since Integromat will use your own email account to send emails), but fear not - they're a respectable, well known company. This is done this way to prevent you from using some other mail server (and instead, use the existing Gmail mail server)
  13. Add your own email as a recipient in the to field
  14. In the subject field, enter New Comment On Your Shopify Blog!
  15. If you'd like, you can add a link to your blog in the content field, so you can just click it to go to your blog when you receive the email.
  16. Click Run Once to test that the integration working properly.
  17. In a new browser tab, enter your hook URL (you generated it at step 8) and click enter to visit it. You should see the word Accepted show up on the browser screen.
  18. Check your email - if you received an email, you can close the Integromat window. The integration was successful!

Note: It might take a while (up to 15 minutes) from the moment the comment was posted to the moment you will get an email. This is due to throttling Integromat's free plan enforces, and can be circumvented by paying for the service. If speed is not of essence, the free plan should suffice.

Setup webhook on successful form post in Shopify store theme

Finally, we'll need to find a way to cause your Shopify Store to “call” the webhook we just created every time there's a new comment. For this we're using a nice trick discussed in an older thread, that checks whether the form in the comment page has been submitted. If it has been submitted successfully, this means that a new comment has been made - and we can send an e-mail!

  1. From your Shopify store's admin panel, go to Themes
  2. Click on Actions and then on Edit Code
  3. Look for the article.liquid template
  4. Look for the commenting form in the webpage (it will look something like {% form 'new_comment', article %}) and right below it paste the following code:
{% if form.posted_successfully? %}
<script type="text/javascript">
  fetch("WEBHOOK_URL", { mode: "no-cors" });
</script>
{% endif %}

Where WEBHOOK_URL is the URL from the last step.

  1. Add a new comment to some post to make sure the integration works.

Bonus - Get the actual comment in the email's body

It is also possible to get the content of the comment - along with some information about the author - in the e-mail's body. This is not mandatory, but nice to have in case you want to skip actually visiting your blog when a comment shows up, and just get the gist of things.

To get this done we need to modify the code we entered into your store's theme. Go back to your theme and replace the code we entered with the following snippet (make sure to replace only our code, and nothing else on the page):

{% if form.posted_successfully? %}
<script type="text/javascript">
  var payload = {
    commentAuthor: "{{ comment.author }}",
    commentEmail: "{{ comment.email }}",
    commentBody: "{{ comment.content }}",
  };

  fetch("<WEBHOOK_URL>", {
    method: "POST",
    mode: "no-cors",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(payload),
  });
</script>
  1. Click the dot-dot-dot line between the Webhook and the Email nodes (note that in the picture above I swapped the Email node for a Gmail node for convenience, which does not change the process)

  2. Click Add Module, and in the menu that pops up start clicking JSON - it will filter out and allow you to select a JSON module. Click it, and you should have the following structure in front of you:

    bonus-1

  3. In the JSON Module pop-up that will open, click the JSON string field and add value (a pop-up will come up, and let you choose the value from the webhook - this is what the form on the shopify blog has send integromat):

    bonus-2

If you don't see this pop-up, run the scenario manually by clicking the run once button at the bottom, and submit a comment to your blog.

  1. Click Add on the Data Structure field, and input the following data structure item by item (a pop up will come up whenever you click on add item):

    bonus-3

Note that commentEmail and commentAuthor are required, while commentBody is not. Click Save and then choose your data structure in the JSON module's window.

  1. Click the Webhook module again, and then re-determine data structure.

  2. Submit your comment again.

  3. Go to the Email module, and click one of the possible boxes - each one of them will now allow you to add values coming out of the JSON module:

    bonus-4

And that should be it! Add a nice message and title, a recipient or two, and you're done!

Troubleshooting

Make sure the Integromat Scenario is enabled

After doing the entire process, you sometimes have to tell Integromat to “enable” the scenario. This can be done by clicking the switch on the “All Scenarios” screen, like so:

scenario-switch