Any suggestions on how to customize the tawk.to positioning within a Next Js script?

I've been attempting to adjust the positioning of the Tawk.to Sticky button on my Next js website using CSS, but it doesn't seem to be working.

Below is the script within the Next Js script tag:

<Script dangerouslySetInnerHTML={{ __html: `
      var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
      (function(){
      var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];    
      s1.async=true;
      s1.src='https://embed.tawk.to/66706a619a809f19fb3eb4bb/1i0jhv3q8';
      s1.charset='UTF-8';
      s1.setAttribute('crossorigin','*');
      s0.parentNode.insertBefore(s1,s0);
      })();
      `,
}}
/>

Attempted solution: I added a tawkWidget ID and tried styling with CSS, but unfortunately, it did not work as intended.

document.addEventListener('DOMContentLoaded', (event) => {
      var tawkWidget = document.querySelector('iframe[title="chat widget"]');
      if (tawkWidget) {
            tawkWidget.id = 'tawk-to-widget';
      }
});

CSS:

#tawk-to-widget {
      bottom: 50px !important;
}
javascriptnext.jstawk.to

Answer №1

I trust that this solution will meet your needs.

useEffect(() => {
    const addTawkScript = () => {
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.async = true;
      script.src = 'https://embed.tawk.to/xxxxxxxxxxxxxx/xxxxxxxx';
      script.charset = 'UTF-8';
      script.setAttribute('crossorigin', '*');
      document.body.appendChild(script);
      return script;
    };

    const setupTawkAPI = () => {
      const isRTL = themeDirection === 'rtl';
      window.Tawk_API = window.Tawk_API || {};
      window.Tawk_API.customStyle = {
        visibility: {
          desktop: {
            position: isRTL ? 'bl' : 'br',
            xOffset: isRTL ? '20px' : '60px',
            yOffset: 20,
          },
          mobile: {
            position: isRTL ? 'bl' : 'br',
            xOffset: 0,
            yOffset: 0,
          },
          bubble: {
            rotate: '0deg',
            xOffset: isRTL ? 20 : -20,
            yOffset: 0,
          },
        },
      };
    };

    const script = addTawkScript();
    setupTawkAPI();

    return () => {
      document.body.removeChild(script);
    };
  }, [themeDirection]);

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

showing javascript strings on separate lines

I need assistance with displaying an array value in a frontend Angular application. How can I insert spaces between strings and show them on two separate lines? x: any = [] x[{info: "test" + ',' + "tested"}] // Instead of showing test , teste ...

javascripttypescript

Axios fails to capture and transmit data to the client's end

I created a backend using Express to retrieve Instagram feed images and then send their URLs to my front end, which is built with ReactJs. When I fetch the image URLs with instagram-node and send them to the front end, everything functions as expected. How ...

javascriptnode.jsreactjs

Utilizing ProtractorJS to Extract Numbers from Text within an Element and Dynamically Adding it to an Xpath Expression

Situation My objective is to extract text from an element on a webpage, convert that extracted text into a number in string format, and then use it for an xpath query. The code snippet below illustrates this process: var bookingRefString = element(by.css ...

javascriptselenium-webdriverprotractor

I'm experiencing some issues with AwaitingReactions in Discord.js, it's not working properly on

I'm having trouble with implementing reaction awaiting as per the guide in discord.js. For some reason, it just doesn't seem to work on my end. No matter what I try, when I click the emoji, it doesn't register. I've scoured numerous Sta ...

javascriptnode.jsdiscorddiscord.js

Encountered an issue while attempting to import a package in ES6: 'Module specifier "vue" could not be resolved'

As I dive into Vue tutorials, I find myself facing a challenge in importing Vue into a .js file and then linking this file to my index.html. The script importation in my index.html looks like this: <script src="./js/main.js" type="module"></scrip ...

javascriptvue.js

Having trouble rendering a dynamic table with JavaScript utilizing a JSON object

I am struggling to retrieve data in JSON format and display it in a table. Despite trying various methods, I have been unable to make it work. Below is the code for this function. Can someone please assist me in identifying what is wrong with it? As of now ...

javascriptjqueryarraysjson

How can I dynamically set the option attribute to "selected" and remove it when another option is chosen?

Before marking this as a duplicate, please read on: Initial Scenario: I am working with a select list and need to dynamically set the selected attribute when a specific option is chosen. Following Actions: Subsequently, when another option is selected fr ...

javascriptjquery

Place an image in the middle of a div with text aligned to the right side

How do I center an image within a div that has text on the right side? The page layout is based on percentages and I want the image to be perfectly centered with the text floated to the right. This is what I currently have: IMG.logo { display: block ...

javascriptcsshtml

I'm seeking some assistance in resolving my JavaScript issue

Let's create a function known as 'bigOrSmall' that requires one parameter, 'arr', which will contain an array of numbers. Inside the 'bigOrSmall' function, let's define a new array named 'answers'. Next, it ...

javascriptarraysfunctionfor-loop

Phonegap not functioning properly with JQuery Ajax requests post compilation

After developing my project in node.js and using phonegap serve, I found that my AJAX functionality was working perfectly. However, upon creating an apk file for distribution testing, the AJAX call stopped functioning. Despite adding necessary configuratio ...

javascriptandroidjqueryajaxcordova

Does the Cors problem happen exclusively during a "put" request?

I am currently developing an Angular application that utilizes ng-resource. The backend service API is created using Asp.Net Core web api and CORS has been enabled. Here is the code snippet for service.js: .factory('D2Service', ['$resource ...

javascriptasp.netangularjshttpcors

Experiencing a Next.js runtime error despite receiving a successful HTTP 200 response from GraphQL

Trying to use GraphQL to update a user's name in the database within a Next.js/React app, but running into issues handling runtime errors, such as when the name already exists. If we throw the error, it results in a bad request runtime error, and retu ...

reactjserror-handlingnext.jsgraphqlapollo

Change JSON to an unordered list using <ul> and <li

I came across an item that resembles the following: { "qA": [ { "question": "How deep is the ocean", "answer": [ "quite deep", "very deep", "no deep at all" ] ...

javascriptjqueryhtmljson

Why doesn't angular generate ng-reflect-_opened="false" in its production build?

We are currently utilizing the following technologies (which cannot be changed in the near future): Angular 2 RC5 Angular CLI 1.0.0-beta.10 Material Design Side Nav Control Node 6.9.1 npm 3.10.8 Windows 10 When we compile the code (using ng serve with d ...

javascriptnode.jsangular

How to retrieve values from a nested array in a Next.js application

I am diving into the world of nextjs and apollo for the first time, and I am currently facing a challenge with using .map to loop through database results. Below is the code for my component: import { gql, useQuery } from "@apollo/client" import ...

javascriptarraysnext.jsjavascript-objects

Creating a dynamic JSON structure from an array list of elements: A step-by-step guide

I am faced with the task of transforming an array of employee IDs, listed as follows: empIds: [38670, 38671, 38672, 38673], into a JSON payload structured like this: { "members": [ { "EmployeeId": &quo ...

javascriptarraysjson

Dealing with MySQL reconnections in a Node.js REST application

Looking for assistance with my Node.js REST API connected to MySQL. I have encountered issues with the connection closing or timing out. Can someone help me troubleshoot my code: Server.js var express = require("express"); var mysql = require("mysql"); ...

javascriptmysqlnode.js

What is the process of uploading a file from a Vue.js app to the local public disk in Laravel?

Hello there, I am looking to upload a file from a Vue.js app to the local public directory of Laravel and only store the unique name in MySQL upon form submission. However, I am unsure how to achieve this using JavaScript. // Template Tag <input type= ...

javascriptlaravelfilevue.jsasyncfileupload

Differentiate the items within a list containing identical divs using JavaScript

Currently, I am expanding my knowledge in HTML, CSS, and JS by incorporating Angular and JQuery. In one of my projects, there is a div labeled "eventBoxes" where multiple divs known as "eventBox" can be added. I have created a template for the eventBox i ...

javascripthtmlangularjs

Is there a way I can retrieve a set of data from a JSON file by simply clicking on the next or

I am currently working on building a Hybrid mobile app using Angular and Ionic frameworks. Below is the sample data that I have obtained: $scope.data = [{ "PID": 108, "Name": "Demo", "TID": 20, "date": "2016/00/29" }, ...

javascriptangularjsjsonionic-framework