Removing the freshchat window across multiple pages in Vuejs

I am facing an issue with the fresh chat window on my website. I want to remove it from all pages except the home page. I have placed the script inside the mounted part of the home component, but once it loads, it never closes. It only disappears if I refresh the page. I suspect this is due to the SPA architecture where the JavaScript is not clearing the header script properly.

mounted() {
    function initFreshChat() {
        window.fcWidget.init({
            token: "***",
            host: "https://wchat.freshchat.com"
        });
    }

    function initialize(i, t) {
        var e;
        i.getElementById(t) ? initFreshChat() : ((e = i.createElement("script")).id = t, e.async = !0, e.src = "https://wchat.freshchat.com/js/widget.js", e.onload = initFreshChat, i.head.appendChild(e))
    }

    function initiateCall() {
        initialize(document, "freshchat-js-sdk")
    }
    if (window.addEventListener) {
      window.addEventListener("load", initiateCall, !1);
    } else {
      window.attachEvent("load", initiateCall, !1);
    }
}

Answer №1

For unloading freshchat, you can use the code window.fcWidget.destroy();. Find out more information about this process by visiting . The website offers all necessary events and functions to easily open and close the chatbox.

Answer №2

I implemented a similar approach by integrating it with the useEffect hook in a React application. I could simply pass the argument true to hide the component on specific pages.

const addFreshchat = (hiddenOnLoad) => {
  const hideFreshChat = {
    config: {
      headerProperty: {
        hideChatButton: true,
      },
    },
    token: 'your-account-token',
    host: 'https://<freshchatUrl>',
  };

  const showFreshChat = {
    token: 'your-account-token',
    host: 'https://<freshchatUrl>',
  };
  const freshChatConfig = hiddenOnLoad ? hideFreshChat : showFreshChat;

  function initFreshChat() {
    window?.fcWidget?.init(freshChatConfig);
  }

  function initialize(i, t) {
    let e;
    const initiate = i.getElementById(t)
      ? initFreshChat()
      : ((e = i.createElement('script')).id = t, e.async = !0, e.src = 'https://wchat.eu.freshchat.com/js/widget.js', e.onload = initFreshChat, i.head.appendChild(e));
    return initiate;
  }
  function initiateCall() {
    initialize(document, 'freshchat-js-sdk');
  }
  function addSDK() {
    const addListener = window.addEventListener ? window.addEventListener('load', initiateCall, !1) : window.attachEvent('load', initiateCall, !1);
    return addListener;
  }
  addSDK();
};

Answer №3

I recently added fresh chat functionality to my application:

window.fcWidget.show() // display widget
window.fcWidget.hide() // hide widget
window.fcWidget.init({
      token: 'your token',
      host: 'host'
    }) // initialize
window.fcWidget.destroy() //remove

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Avoid activating automatic save feature in Material UI data grid

After creating a data-grid and attempting to add records, I encountered an issue where pressing the TAB key automatically saved the data when focusing on the save button without manually pressing enter. How can this behavior be prevented so that manual con ...

Adjust the svg rate using jQuery or JavaScript

Seeking help with a gauge I found on CodePen - struggling to adjust bubble values... <path id="Fill-13" fill="#F8B50F" d="M3.7 88.532h26.535v-#.795H3.7z"/> Can change the bars in JS, but not the bubbles using jq/js. Adjust the gauge with values be ...

Node.js Error: The object does not have the specified method

Recently, I dived into the world of node.js by following a fantastic tutorial on node.js, express, and mongodb from Howtonode. However, I encountered an error that doesn't seem to have been addressed in the comments section. The last comment was made ...

Encountering the error "TypeError: Unable to access property 'controls' of undefined" when utilizing formArray in Reactive forms

Hi there, I am currently working on creating a dynamic form using formArray in Angular. However, I have run into an issue with the error message "TypeError: Cannot read property 'controls' of undefined." import { Component, OnInit } from ' ...

What is the most efficient way to retrieve the largest category_id within a nested object array?

Seeking guidance as a beginner in ReactJS. I am struggling with looping through a nested object array to find the largest category Id. Despite my efforts, I am unable to retrieve the desired result because the largest category ID may not always be locate ...

Turn off the ability to view the content of .css and .js files within the browser

Earlier, I inquired about how to disable file and folder listing and discovered that it can be achieved using a file named .htaccess. To disable folder listing, I entered Options -Indexes in the .htaccess file located in the parent folder. Additionally, to ...

Maximizing Performance: Enhancing Nested For Loops in Angular with Typescript

Is there a way to optimize the iteration and comparisons in my nested loop? I'm looking to improve my logic by utilizing map, reduce, and filter to reduce the number of lines of code and loops. How can I achieve this? fill() { this.rolesPermiAdd = ...

How can I add styling to materializecss chip elements?

When working with tags on a web page, Materializecss makes it easy. However, I have a requirement where the tags need to be of different colors based on their types. Although this is feasible, another complication arises when supporting Materializecss keyb ...

How can I safeguard my HTML and CSS content from being altered using tools similar to Firebug?

Is there a method to deter the alteration of HTML and CSS components on a webpage using tools similar to Firebug? I have noticed that certain users are changing values in hidden fields and modifying content embedded within div or span tags for their perso ...

Ways to identify whether a day is in Pacific Standard Time (PST) or Pacific Daylight

While working on setting a date in node js for my server located in IST, I am trying to figure out whether the date would fall under PDT or PST time (depending on Daylight Saving Time being on or off). If my server was in PST/PDT time zone, this decision ...

What is the best way to align various types of content within a div container

I'm struggling with aligning a label next to a checkbox in my HTML code using Vue.js. Here's how it looks: <div style="margin-bottom: 15px;"> <input id="newsletterRegister" type="checkbo ...

Enhancing TypeScript Types with a custom method within an Angular 2 context

I am working on an Angular 2 project using the CLI. Currently, I am trying to add a custom method to the String type as shown below. interface String { customMethod(): number; } String.prototype.customMethod = function() { return 0; } Despite my ...

a single function spread across two controllers[JavaScript]

My query pertains to a JavaScript program with 2 controllers. The issue I am facing is the need for one function in both controllers (data.duration). This function serves two purposes, once for features themselves and once for the summary. Currently, this ...

Creating a PDF from dynamic HTML and transferring it to an AWS S3 bucket without the need to download the PDF

We have created a web application using React JS where we attempted to generate a PDF. Instead of downloading or opening the PDF in a new window, our goal is to directly upload it to an AWS S3 bucket. We have researched and tried various samples but have n ...

Clearing hoverIntent using jQuery

In my scenario, I have three items identified as X, Y, and Z. The functionality of hovering is controlled by the hoverIntent. When I hover on item X, a tooltip is displayed using the following code: jQuery('.tooltiper').hoverIntent({ ove ...

A guide on sending multiple input values using the same class name or id through ajax

My goal is to send multiple input values through AJAX to my PHP script. Everything works smoothly when I use getElementById. However, I have the functionality to add a child. The issue arises when it only retrieves values from the first child while iterati ...

Implement a trigger to activate toggling functionality

<span id="test">​click</span>​​​​​​​​​​​​​​ $('#test').toggle(function() { alert('true'); }, function() { alert('false'); }); $('#test').trigger('click') ...

An error has occurred during runtime due to a TypeError: The application is unable to access properties of an undefined object, specifically 'Upload'. This error has

Greetings to the amazing Stack Overflow Community! Currently, I'm developing a Next.js application that requires me to upload videos to Vimeo. To achieve this functionality, I've implemented tus-js-client for handling the uploads. However, I&apo ...

Error: The property 'ss' cannot be accessed because it is undefined

Our main source page will be index.html, while Employees.html is where our results end up. An error occurred: TypeError - Cannot read property 'ss' of undefined Error in the code: let rating = req.body.ss; Seeking assistance please >< C ...

Any tips on how to retrieve my mesh that has disappeared off the screen?

Struggling to find a way to detect when an element goes off screen, can someone provide guidance? My project utilizes WebGL along with Three.js. ...