How to hide facebook customer chat plugin on specific pages of my SPA? - facebook-javascript-sdk

We have SPA (single page application, generated nuxtjs project) with facebook customer chat plugin on it.
This plugin is initialized during page refresh and remains on the site after router loads view.
We want to show this plugin only on specific pages such as landing page, support page, payment page and hide on the rest pages.
During initial load the plugin creates iframe with all the magic inside it and this iframe remains during SPA navigation untouched.
The question is - how to properly hide facebook customer chat plugin on specific pages? Destroy iframe? Some undocumented settings? Another magic?
Thanks

Аfter the widget has been initialized, you can easily control the visibility through the methods window.FB.CustomerChat.show() and window.FB.CustomerChat.hide()

Related

Vue based Telegram Web App opens page outside of Vue path in Browser

I have a Vue-based Telegram Web App (API 6.x), which opens in Telegram App, clicking on the for Bot defined Button.
Now inside of the (one page, no router) Vue app I need to bring user to another, non-vue-based page.
Vue App > domain.com/game
Link to > domain.com/game/win
// inside vue component
<button #click="participate()">Participate Winning Game</button>
Participate Winning Game
As soon the User clicks on the link (or I do in participate() window.location.href/replace), Telegram asks the user to open /gam/win in Browser.
Is there a way to avoid this behavior and load /game/win inside the Telegram App?
Earlier I faced the same problem. Telegram Web App for Bot suggests opening any links in an external browser. I did not find documentation on the work of links in the application.
In my application on JS, I implemented a page redraw with new data received from the backend.
P.S. links to phones or other messengers like
Telephone
Skype
do not work at all.

How to integrate a landing page with a Vue SPA?

So, I've built an SPA with Vue. We hire a designer to create a landing page. The landing page looks great. It shows some info about the app and there is a "Sign in" button that does nothing at the moment.
The landing page does include CSS and Javascript (jQuery etc) that I don't, and don't want to, use in the Vue app.
So the question is: Is it possible to include the landing page code in my Vue project without loading landing page JS/CSS if user is already signed in?
Plan B for me is to host the landing page on mydomain.com and the app on app.mydomain.com. This will work I guess, I see others do this. But it would be nice to know my possibilities
Did some search and didn't find exact solution to your issue, however it seems that this is doable. I have some concerns regarding the head part of the page, but this is a way to start:
Create new Vue component that will include all the HTML code (body only) that you need + install (with npm) and import all needed js files, including jQuery, in that component.
Make sure, that you configure this component as lazy loaded in vue-router - so all your html and scripts will be separated from the app.
From there Vue should do the job - you will get your page where needed and other routes will be inside the app.

How to navigate to another HTML file without single DOM?

I have created a sample application with login page and home page.
i have loaded the login page as Main Page successfully and i have homePage.html/homePage.js files. What i need to do is, when i click on Login button from loginPage.html file, user should navigate to Home Page. I couldn't see any APIs fro navigate/load to different html files.
i referred some worklight samples it says loading on same HTML using div and pageport commands.
$("#pagePort").load("pages/homePage.html", function(){
alert("Home Page Loaded")
});
Can any one help me to get resolve, how we can load another html on click of login button?
Worklight is a single DOM application, hence the notion of "pages" is an artificial one.
You have 1 singular HTML file and what you need to do is replace content inside it to display different content, or "pages".
There are numerous ways you can accomplish this. None of them relate directly to Worklight, but to the framework you select to work with, be it jQuery, jQuery Mobile, Dojo, Ionic and so on...
The important thing to remember is to never navigate away from the index.html file because you will then "lose" the Worklight context and your application will then fail loading. The reason is because from the index.html file, you load various required Worklight-related files.
In this Worklight 6.2 project I demonstrate, using jQuery Mobile, how to navigate between pages. For your purpose, think of them as a mainpage that is a login page and then some other page that is the home page...
Related:
https://stackoverflow.com/a/25060136/1530814
https://stackoverflow.com/a/22171687/1530814

How does new Facebook App integrates App Store page?

Since some weeks Facebook displays ads for apps in their iOS client. When you click on them the App Store apps detail page opens as a modal view controller inside the Facebook app.
I only know how do open App Store pages via their URL, but how to show a App Store page from inside your app?
You're looking for the SKStoreProductViewController. Here is a link to the docs :)
https://developer.apple.com/library/ios/documentation/StoreKit/Reference/SKITunesProductViewController_Ref/SKStoreProductViewController.html
I also found this helpful tutorial :)
http://www.techotopia.com/index.php/Making_Store_Purchases_with_the_SKStoreProductViewController_Class

How do you associate a Page with an App, now that the migration deadline is over?

Here's the situation: I have a native iOS app that had its entry in created Facebook Developers before App Profile Pages were deprecated. There is an automatically created App Profile Page for the app, but when I view it, it has a yellow box saying:
Removing App Profile Pages App Profile Pages are now deprecated. We
recommend updating any links that you have shared to your App Profile
Page to point to your new target Page or app. Please save any content
or Insights that you wish to keep. This content is accessible via the
Graph API with any valid access token. For additional information,
please review this post:
https://developers.facebook.com/blog/post/2012/02/01/how-to--migrate-your-app-profile-page/
Before February 1st, there was a link to migrate this page to a regular Facebook Page, but now there isn't. I've created a new Facebook Page according the the docs, and the page has the same name as the app and the category is set to Products/App. But I see no way to associate this new page with my app.
How are we supposed to associate a new Facebook Page with an existing app?
So I ended up deleting my app on Facebook and creating a new one. This meant changing the App ID strings in my iOS app and in its URL handler, but now it works correctly, and I can create a normal Facebook Page for the app. If you have an existing app that customers are already using, that means you'll break the app unless they've updated it on their iOS device, and you lose everything on the old page.
To associate an existing Facebook Page with an App:
Go to your Facebook Page and click "Edit Page" section
In the Basic Information tab, set Category as "Brands & Products" -> "App Page"
Make sure the Page name is the same as the App name
Go to your Facebook App "Edit App" page, and now you will be able to choose the Page as the App page.