We have a friend, who is running a small jewelry store online. She shared a story with us recently, when one of her product got unexpectedly high attention and was gone long in the middle of a quite costly ad campaign. Unfortunately, it happened during nighttime when she was sleeping, so she was still paying for attracting customers, who were unable to purchase the desired item.

She has an amazing taste and knows how to run a jewelry store really well, but she is not a tech person almost at all. She was still able to figure out, how to launch the store on the existing platform though. Therefore, once we learned about a one-time notification feature provided by Facebook Messenger Platform, we immediately identified a great match for our friend needs and decided not only to help her but also millions of other shop owners l

What it does & How we built it

Shopify app installs js event handler, which listens to the product selector and once the one, which is out of stock is selected, it renders fb-send-to-messenger button. If a user clicks the button, the Facebook Platform will call our backend and provide the user ID and selected product variant payload. Those are used to construct One-Time-Notification API call to request a user's permission to send a notification on behalf of Facebook Business Page. Once a user accepts it, Facebook will trigger another callback, so our backend will have an opportunity to store a one-time access token, which will be used sometime later. Shopify Inventory Update webhook is another component, which is installed as a part of the Back 2 Stock application bundle. It will be triggered once Shopify Admin updates inventory level and lets our backend know if a certain product variant is available again. This triggers sending notifications to all subscribed users with a direct link to the product.

Challenges we ran into

From a technical perspective, it is ridiculous how many different technologies we had encountered for a seemingly small idea:

  • oauth2 authorization between Shopify and our app, and later our between our app and Facebook to get permissions to install a Facebook app to a Facebook business page
  • Graphql to request inventory data from Shopify
  • Setting up webhooks to interact with both Shopify and Facebook
  • Javascript integration with Shopify product page

While each piece seems manageable by itself, combining them together and making sure that workflow works end-to-end with so many small pieces in the middle was quite a challenge

Accomplishments that we're proud of

We are very proud that we could leverage APIs and frameworks provided by the platforms, so we could quickly build a meaningful product, which we expect to be adopted quite soon by many online shops in such a short period of time with very limited resources. With this mindset and obtained experience, there should be an ocean of other opportunities in front of us

What we learned

In the modern world, one has to learn a lot of different technologies and frameworks to build even a small idea, which might be challenging. But at the same time, there are so many things built already, which gives great leverage to build and test in a wild new idea quickly without necessity to reinvent the wheel.

Share this project: