[NEW APP] Blog Comment Notifications - free service is finally here

[Sixto]

Finally a free app that sends you an email when any of your blogs has a new comment.

I built this for myself as I kept missing comments from users, only to discover them days later.

Since I started using this, I'm really quick to follow up, thank users as well as answer questions which makes me look good 🙂

Feedback is welcome along with feature requests.

There is a 100% free plan, along with some paid plans for more frequent checking (starting at 99 cents)

You can check it out in the Shopify App Store by clicking directly on the banner above.

Never miss an important blog comment again.

Enjoy!

Sixto

bcn.sixtoapps.com

[Marmee-Dear]

I can't find this. I want this! Why isn't this a feature Shopify?  I see it is dated 2014. It is 2020 today. Is this obsolete? Surely there is something that will notify me if I have a blog comment? Or I suppose I just set an alarm to check it every day 😞 

[Red_Cap_Tom]

Awesome blast from the past, @Marmee-Dear. @Sixto's website and Shopify App seem to both be down, but this can probably done using a webhook and something like IFTTT. I think I saw something like this asked before in the forums - I'll pull it up and be back in a bit.

[Red_Cap_Tom]

Ah, alright, here's the old blog post:

https://community.shopify.com/c/Shopify-Design/How-to-get-new-email-notification-when-new-blog-post-...

I'm testing the solution with IFTTT right now, should work in theory. Back in a flash with a full tutorial on this.

[Red_Cap_Tom]

Tutorial on Setting Up E-Mail Notifications For New Shopify Blog Comments

Step 1 - Setup Blog In 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 (see https://help.shopify.com/en/manual/sell-online/online-store/blogs/managing-comments#allow-or-disable... for more information).

5. Click Save blog.

See https://help.shopify.com/en/manual/sell-online/online-store/blogs/adding-a-blog for more information. The next step is a bit long, so I'm going to break it into its own post.

BTW - I chose to go with Integromat instead of IFTTT since IFTTT's webhook-->email support is... not great.

[Red_Cap_Tom]

Step 2 - Setup Integromat

Integromat is a service that allows you to connect one online service to another. So, for example, you could 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. Signup to Integromat - https://integromat.com 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

5. In the new "Scenario" window that will open up , click the big white question mark, and select Webhooks --> Custom webhook

6. Click add to create a new webhook

7. 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)

8. Click "Copy address to clipboard" and take note of this address - you'll need it later

9. Click OK, and then "add another module"

10. Choose E-Mail --> Send an e-mail

11. 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)

12. Add your own email as a recipient in the "to" field

13. In the subject field, enter "New Comment On Your Shopify Blog!"

14. 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.

15. Click "Run Once" to test that the integration  working properly.
16. In a new browser tab, enter your hook URL (you generated it at step 😎 and click enter to visit it. You should see the word "Accepted" show up on the browser screen.

16. 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 using the free option in Integromat.

This was a long step, see the next message for the final step to actually insert your newly created hook into the comment page.

[Red_Cap_Tom]

Step 3 - Setup Webhook on Successful Form Post on 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 (https://community.shopify.com/c/Shopify-Design/How-to-get-new-email-notification-when-new-blog-post-...), 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 --> Edit code

3. Look for the `article.liquid` template

4. Look for the commenting form in the webpage (it will say 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.

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

And that's about it! Let me know if this does not work.

[Benj_Borseth]

Hi KidOnPoint,

Great set of posts, I really appreciate them, my question is can the body/name/email of the comment be included in the webhook so that it can be included in the email and we can then filter out spam comments from the notifications. 

On a separate note, I used zapier instead of integromat as I get instant notifications then although I already pay for it.

[Red_Cap_Tom]

Hey @Benj_Borseth,

Glad you liked it!

Let's walk through this in private messaging, show me your flow with Zapier, and then we'll post the final response here.

DMing you now.

[Rocking]

Does it matter which feedburner we set in Shopify for this to work?

[Red_Cap_Tom]

Maybe I'm missing something here @Rocking - are you referring to my tutorial or the original app?

As per the original app - it's non-functional, so I'd skip it.

As per my tutorial - the Feedburner URL should not matter. Did it cause you any problems?

[Rocking]

I'm talking about your tutorial. Mine's always been set on the default (I never changed it).

I followed your tutorial. When running a test on Integromat, on my webhook URL, it works.

My browser shows "Accepted" and I receive an email.

But when posting a new comment, I don't receive any email. (I waited longer than 15 minutes)

I will change the Feedback URL setting in Shopify to https://feedproxy.google.com and see if that works.

In the meantime, if you have any other ideas, please post them.

UPDATE: It's been 18 minutes since I changed the setting and posted another comment on a blog. Still no email. Not working.

[Red_Cap_Tom]

@Rocking set as None for me:

[Rocking]

Ok, I set to None.

Wrote new comment.

Will update in about 20 minutes.

[Red_Cap_Tom]

@Rocking I also have a suspicion it has to do with the code you inserted on your blog page, that might be inconsistent with what I had in mind (that is, I neglected to include your format of the comment page in my tutorial).

Could you please share the following:

1. A link to the blog page

2. A screenshot of the code you entered, where you entered it

These two should help me indentify exactly what's the source of the problem.

If that won't work, and you could provide me with access to your store (note that I'm a registered Shopify Partner) I might be able to figure it out. If that's a good solution - send me a private message and we'll take it from there.

[Rocking]

I myself am a computer software engineer so I'm sure I followed your instructions correctly 🙂

If you need access to the store, that is fine.

Here is what you asked for:

1. A link to the blog page:

https://crayolex.com/blogs/cbd/why-you-should-never-measure-cbd-oil-in-drops

2. A screenshot of the code you entered, where you entered it

[Red_Cap_Tom]

Ah, awesome! Always happy to see a brother in arms in the trenches:)

And, just to re-iterate, it was more likely a me problem than a you  problem here - tutorials should be self-explanatory enough that any reasonable person can fix their issues using just the things in the tutorial. It's the tutorial writer's fault if that is not the case. 

Can you inspect the page using CTRL+SHIFT+I (Chrome Inspector/DevTools), add a comment, and see whether a request to the webhook has fired? Could be a CORS issue (although not likely) or some other shenanigans going on.

[Rocking]

The console shows some DOM listener but it's not our listener since it's fired even without the article.liquid code.

So no, I don't see the webhook being called.

Want to connect? I'm sure you know, now Collaborator accounts are separate from Staff accounts and are unlimited 🙂

Should I add you as a collaborator or staff?

PM me the email to do so.

Thank you so much.

[Red_Cap_Tom]

Will do! 😉

[Rocking]

Ok guys! This work!

@Red_Cap_Tom was VERY helpful when it wasn't working for me.

There were two issues causing it not to work.

First, he forgot to mention that you need to turn on scheduling in integromat:

Second, after connecting to my Shipoy store and after some trial and error, he figured out that since I was using the GemPage App to design my site, my article pages were not linked to the default article.liquid template, but rather to a GemPage created template:

Since GemPages creates a new template liquid file for EACH article, you will have to paste the code into each one manually.

The place where the code should go is where Tom mentions in his tutorial, after {% form 'new_comment', article %}.

Hope this helps someone!