In our previous post, we covered how to create a WebRTC button with a drop-down menu using the OnSIP Admin Portal. Here, we’ll go over how to add a custom Page Tab to your organization’s Facebook page so your followers can voice or video call you directly from their web browser.
In order to add a WebRTC button to your Facebook page, you will need to create a new custom Page Tab on Facebook. This allows you to load content from your webserver using an iframe. In other words, you’ll need to create a secure webpage to display your InstaCall button and any other information you wish to include on the page.
we included a Youtube video, a CTA, and a link to our website. You can use an existing landing page template, or build your own from scratch. Facebook requires that you have SSL support (https:// instead of http://) for the page.
Add in the InstaCall button script you created from the previous blog post to your webpage. You should see a drop-down menu above the Click-to-Call button that allows you to choose a caller. Be sure to test out the drop-down menu and button by calling each user. For more details on customizing the CSS styling of your InstaCall button, visit our Knowledgebase article here.
To use Facebook’s developer tools, you will first need to register as a Facebook Developer with your Facebook account credentials on developer.facebook.com. Once you have signed in successfully and agreed to Facebook’s policies, you will see a button on the top right-hand corner of the page that says “My Apps”. Click on it, then click the green button that says “+ Add a New App”. Unfortunately, you cannot include the word “Insta” in the app name, so use something like “Click to Call [company name]” or “Video Call Demo”.
On the App Dashboard, click on Settings on the left sidebar menu. At the bottom of the page, click “+ Add Platform”. From the pop-up overlay, select “Page Tab”. You will then be presented with some configuration options for your custom Tab.
Enter the URL for the secure webpage you created and select a name for the Page Tab. You can also choose to enter a Page Tab Edit URL for admins, allow admins to override App Image and Name, select standard (520px) or wide (810px) page width, and/or upload a Page Tab image (must be 111 x 74 pixels, JPG, GIF, or PNG, file size limit 1 MB). Save your changes.
To add your new custom Page Tab to your Facebook page, you will need to create a custom link with your app ID and page tab URL that looks like this:
On the App Dashboard, you can find your App ID displayed in the first block, under your app name and next to your API Version. The custom tab URL is the webpage hosting your InstaCall button. Create your custom link by entering your App ID and page tab URL to the template above.
Now, open a new tab in your web browser and enter your custom URL. You should be redirected to a Facebook page displaying a dialog box asking you to add the new Page Tab to your Facebook page:
visit their documentation here.
Once you have successfully added your WebRTC button page tab to your Facebook page, you can rearrange the order of your page tabs by clicking “Manage Tabs” at the bottom of your left sidebar. Simply drag and drop the tabs to the order you wish to display them, then hit “Save”.
That’s it! Don’t forget to test out the WebRTC button on your Facebook page, then invite your followers to try it out for themselves. If you have any questions, let us know on Twitter @onsip or post on our Facebook page.