1 of 35

Najmuzzama Khan

Ritik Tripathi

​

Instagram Integration

​

​

2 of 35

Table Of Contents

  • Developers’ Console
  • App Creation
  • Overview
  • Roles
  • Webhook
  • Settings

Facebook Console

Code Flow

  • Flow Chart
  • Env Variables
  • Code Flow
  • Limitations
  • Additions

3 of 35

First, We Need To Create An App, And Then Select It.

​

4 of 35

Basic Overview Of Our App Console

5 of 35

Cont…

6 of 35

Different Roles To Operate On The App

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

7 of 35

Requirements for Administrator’s account

Requirements for Tester’s account

  • Instagram Business Account
  • facebook page
  • Both should be connected together
  • Instagram Normal Account
  • Facebook Id
  • Both should be connected together

8 of 35

Webhooks

​

  • A webhook is a feature in the Instagram Messaging API provided by Facebook that allows developers to receive real-time updates from Instagram when certain events occur, such as when a user sends a message to their chatbot.

​

  • With webhooks, developers can set up a callback URL to receive POST requests from Instagram when specific events happen. These events can be:
    • Message
    • Postback

​

9 of 35

Webhooks To Be Used, First Need To Be Subscribed

10 of 35

Messaging Webhooks Field

Description

message_reactions

​

A notification is sent when a customer reacts to a message sent by your business.

messaging_seen

​

A notification is sent when a customer reads a message sent by bot, for Instagram Messaging conversations.

messaging_postbacks

​

A notification is sent when a customer clicks a postback button, Get Started button, or persistent menu item for Messenger conversations

Available Messenger Webhook event

11 of 35

messages

​

A notification is sent when your business has received a message from a customer from any conversation entry point.

​

messaging_handover

​

A notification is sent when a change has occurred during the Handover Protocol

​

standby

A notification is sent when a conversation is idle for an app during the Handover Protocol

​

12 of 35

To Set Up A Webhook, Developers Need To Provide A Callback Url And A Verify Token.

​

​

​

  • The callback URL is the URL where Instagram will send the webhook payloads when specific events occur, such as when a user sends a message to the chatbot.

​

​

​

  • The verify token is a token provided by the developer that is used to verify the authenticity of incoming webhook requests. It is included in the webhook request by Instagram, and the developer's server compares it with the token provided during webhook setup to ensure the request is valid.

13 of 35

Attaching The Callback Url And Adding Verify Token

14 of 35

App Review

​

​

  • All apps must be submitted for review before they can interact with everyone on Instagram.
  • The submission process requires you to explain how to test your app.
  • Why your app needs each of the permissions and features you are including in your submission.
  • you must include a screen recording that shows us how to test any functionality
  • Meta wil verify that it uses each requested permission or feature as depicted in your recording.

​

​

​

15 of 35

Basic Data Flow

Message received from requestHandler

We make sockets and userData object and pass to OCS entry point

Message is processed

Sent to IG through responseHandler

​

16 of 35

Flow Chart

17 of 35

What We Need In Env For Integration

  • IGPageAccessToken
  • IGAppSecret
  • IGVerificationToken
  • IGPageId
  • IG_BOT_STATUS

18 of 35

An Endpoint To Receive Webhooks Notifications From The Messenger Platform

File- App.js

  • This code creates a ig/webhook endpoint that accepts POST requests and checks that the request is a webhook notification.

19 of 35

Validating Verification Requests

​

​

​

​

​

​

File- Botly.js

Whenever the endpoint receives a verification request, it must:

  • Verify that the hub.verify_token value matches the string you set in the Verify Token field when you configure the Webhooks product in your app.
  • We then respond with the hub.challenge value.
  • the "hub.challenge" value is a parameter used in the process of subscribing to Instagram's Real-time Updates API, and it is used to confirm the subscription and start receiving real-time updates.

20 of 35

What After Configuring Webhook ?

​

​

  • We will start receiving request from Instagram once user start messaging.
  • This code creates an endpoint that accepts POST requests and handles all the requests which are coming from the IG.

File- Botly.js

initial point of receiving request

21 of 35

Handlemessage Function Where Different Functionalities Are Handled

File- Botly.js

Only functionalities which are handled in IG till now

​

  • userMessage
  • Postback

​

22 of 35

Different Types Of Events Get Emitted By These Functions Such As Message, Postback etc.

​

File- Botly.js

23 of 35

To Capture “Message” Event From The Messenger Platform

File- igBotManager.js

24 of 35

Similarly, we handle the "postback" event from the Messenger Platform, which is triggered when a user interacts with a button that has text data

File- igBotManager.js

25 of 35

  • The sendAction method is a method provided by the Facebook Messenger Bot API that allows you to send a "sender action" to the user to provide feedback and improve the user experience.
  • When you call the sendAction method with the typing_on action, the Messenger platform will display a typing indicator to the user, indicating that the bot is currently typing a response.
  • When you call the sendAction method with the mark_seen action, the Messenger platform will display a small animation to the user to indicate that the bot has "seen" their message.

File- igBotManager.js

What Is sendAction Method?

26 of 35

File- socket-functions.js

After processing from ocs, emitMsgToIgclient function is called from socket-functions.js for instagram

​

27 of 35

  1. Text
  2. Text_with_buttons
  3. Image_with_buttons
  4. Video
  5. Carousel

​

Multiple Types Of Messages Can Be Handled And Sent To Instagram Based On The Generated Message From Our Backend.

28 of 35

Multiple Types Of Messages Can Be Handled And Sent To Instagram Based On The Generated Message From Our Backend. (Example)

​

File-igBotEmitter.js

29 of 35

Quick Replies

​

  • Quick replies provide a way to present a set of buttons in-conversation for users to reply with.
  • A maximum of 13 quick replies are supported and each quick reply allows up to 20 characters before being truncated. Quick replies only support plain text.

30 of 35

Size Limit Of Different Message Types Over Instagram

​

​

Text Messages

1,000 characters

Audio Files

25 MB

Documents

100 MB

Images

8 MB

Videos

25 MB

31 of 35

How To Handle Multiple instagram Pages

1. We create a map called "IG_access_token_map" that stores key-value pairs.

2. The key is "Recipient_Id" and the value is "Access_Token".

3. To determine from which ID we need to send the response, we convert the senderId to "senderId_recipientId".

4. We then check whether this recipientId exists in our map. If it does, we retrieve the corresponding access token and add it to the options object for sending to Instagram.

5. The options object should be structured as follows.

File-igBotEmitter.js

32 of 35

What other features can we add?

​

​

What is Ice Breakers?

  • The "Ice Breakers" feature in Instagram Direct Messaging is a set of predefined messages and questions that can be used to start conversations with new people or accounts on Instagram.
  • Ice Breakers provide a way for users to start a conversation with a business with a list of frequently asked questions. A maximum of 4 questions can be set via the Ice Breaker API.

Read More on Messenger Docs

​

33 of 35

What other features can we add?

​

​

What is the Persistent Menu?

  • The Persistent Menu allows you to create and send a menu of the main features of your business, such as hours of operation, store locations, and products, is always visible in a person's Messenger conversation with your business.
  • When a person clicks an item in the menu, a postback webhook notification is sent to your server, with information about what item was select and by whom, and the standard messaging window opens. You have 24 hours to respond to the person after the CTA.

Read More on Messenger Docs

34 of 35

Problem With Persistent Menu

  • Once a user has seen and used an option from the persistent menu, any changes made to the menu structure or options will not be reflected for that specific user.
  • This means that even if you update the menu options or structure, those changes will not be immediately visible to users who have previously interacted with the persistent menu
  • New changes will only be visible to new users or users who have not yet engaged with the menu

Solution- existing users need to reset their chat history

35 of 35