Insert chat only on select pages

[mrkylemac]

Hey!

Is it possible not to have the facebook messenger as a global element, instead only inserting onto specific pages?

[iguido95]

The Facebook SDK states that this should do the trick to at least hide it: FB.CustomerChat.hide();

However, this object/method is not exposed via the plugin. Don't know how to get it to work.

[illusive-ch]

Has anyone figured out how to do this yet? I have tried a few things using beforeach in the router but could not get it to work @dmnWebDesign

[iamcienlim]

I am looking forward to this too.

[rumaan]

I tried the following:

Show Chat Plugin:

if (typeof window !== "undefined") {
      if (typeof window.FB !== "undefined") {
        window.FB.CustomerChat.show(false);
      }
    }

Hide Chat Plugin:

if (typeof window !== "undefined") {
      if (typeof window.FB !== "undefined") {
        window.FB.CustomerChat.hide();
      }
    }

I put these in mounted() and beforeDestroy() callbacks for every page I want to show / hide the plugin

[CHOMNANP]

I'm looking for same thing. Anything manage to get this solve?

[KylSanAntonio]

I tried the following:

Show Chat Plugin:

if (typeof window !== "undefined") {
      if (typeof window.FB !== "undefined") {
        window.FB.CustomerChat.show(false);
      }
    }

Hide Chat Plugin:

if (typeof window !== "undefined") {
      if (typeof window.FB !== "undefined") {
        window.FB.CustomerChat.hide();
      }
    }

I put these in mounted() and beforeDestroy() callbacks for every page I want to show / hide the plugin

Hi @rumaan , I tried doing this but it is not working on my end.

Here's my code in mounted()

mounted() {
	// check if in login page
	let is_index_login = this.isLogin();
	this.sys_type = this.getSessionSysType();
	
	// hide fb chat
	if (typeof window !== "undefined") {
		if (typeof window.FB !== "undefined") {
			window.FB.CustomerChat.hide();
		}
	}

	if (!is_index_login) {
		switch (this.sys_type) {
			case this.sys_type_dps:
				// ....
				break;
			case this.sys_type_ol:
				// show fb chat
				if (typeof window !== "undefined") {
					if (typeof window.FB !== "undefined") {
						window.FB.CustomerChat.show(false);
					}
				}
				break;
		}
	}

So to summarize, there are two sys_type, DPS and OL. I want to always show the feature only if the user is NOT in the login page and the page he is accessing is sys_type = OL

I also added it in beforeDestroy() but the chat is always showing in ALL pages.

[KylSanAntonio]

I tried the following: Show Chat Plugin:

if (typeof window !== "undefined") {
      if (typeof window.FB !== "undefined") {
        window.FB.CustomerChat.show(false);
      }
    }

Hide Chat Plugin:

if (typeof window !== "undefined") {
      if (typeof window.FB !== "undefined") {
        window.FB.CustomerChat.hide();
      }
    }

I put these in mounted() and beforeDestroy() callbacks for every page I want to show / hide the plugin

Hi @rumaan , I tried doing this but it is not working on my end.

Here's my code in mounted()

mounted() {
	// check if in login page
	let is_index_login = this.isLogin();
	this.sys_type = this.getSessionSysType();
	
	// hide fb chat
	if (typeof window !== "undefined") {
		if (typeof window.FB !== "undefined") {
			window.FB.CustomerChat.hide();
		}
	}

	if (!is_index_login) {
		switch (this.sys_type) {
			case this.sys_type_dps:
				// ....
				break;
			case this.sys_type_ol:
				// show fb chat
				if (typeof window !== "undefined") {
					if (typeof window.FB !== "undefined") {
						window.FB.CustomerChat.show(false);
					}
				}
				break;
		}
	}

So to summarize, there are two sys_type, DPS and OL. I want to always show the feature only if the user is NOT in the login page and the page he is accessing is sys_type = OL

I also added it in beforeDestroy() but the chat is always showing in ALL pages.

I already fixed this by using CSS.

[KylSanAntonio]

Hi Benoit,

In my CSS file, I declared this: #fb-root, .fb-customerchat { display: none; }

Then in my JS file after the if condition (condition where to display the chat), I added this: var x = document.getElementsByTagName("STYLE")[0]; x.innerHTML += x.innerHTML + '#fb-root { display: block !important; }'; I appended a CSS style in "style" tag. (I know this is a bad practice but this is just my workaround).

Let me know if you have a better solution.

Thanks, Kyl

On Mon, Jan 18, 2021 at 9:27 PM Benoit [email protected] wrote:

Hi @KylSanAntonio https://github.com/KylSanAntonio ,

Could you please explain how you did this with CSS ? I tried :

this.$el.querySelector(".fb-customerchat") document.querySelector(".fb-customerchat") this.$el.querySelector("#fb-root") document.querySelector("#fb-root")

but none of them return me the DOM element and thus I can't apply a display block/none.

For information, I try to hide/show facebook chat on route change ($route watcher), but Facebook SDK limits the call of these features (each function in Customer Chat SDK is limited to 1 call per 5 seconds). So I think the CSS solution should work for me ..

Thanks !

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/dmnWebDesign/vue-fb-customer-chat/issues/9#issuecomment-762250504, or unsubscribe https://github.com/notifications/unsubscribe-auth/APULT4XG7J7SEODLQ6FNTYDS2QZN5ANCNFSM4JDK7KFQ .

[benoitverstraete]

Hi @KylSanAntonio ,

Here is my solution in CSS, probably simpler (in mounted, methods or watcher) :

const facebookChat = document.querySelector(".fb_dialog");

facebookChat.style.display = "block";
or
facebookChat.style.display = "none";

[putuyoga]

In addition to @rumaan Here is a full complete typescript code reference for whoever uses nuxtjs In my case, I only need to show it on the front page.

export default {
  watch: {
    $route(value: Route) {
      this.toggleFBChat(value?.name || '')
    },
  },
  mounted() {
    this.toggleFBChat(this.$route?.name || '')
  },
  methods: {
    toggleFBChat(routeName: string) {
      const chat = (window as any)?.FB?.CustomerChat
      if (chat) {
        // Show only at front page
        const isIndex = routeName.indexOf('index') === 0
        isIndex ? chat.show(false) : chat.hide()
      }
      
      console.log("Can't find the FB instance. Retry toggling the fb chat...")
      setTimeout(() => this.toggleFBChat(routeName), 1000)
    },
  },
}