Location of chat icon in Dialogflow messenger

After successfully embedding the Dialogflow messenger in my website, I noticed that in mobile view, the chat icon is blocking the bottom navigation bar. You can refer to the screenshot here.

Is there a way to reposition the chat icon higher on the page? I have already attempted various methods without any luck.

  • I tried using Javascript: 
    document.querySelector('df-messenger').shadowRoot.querySelector('.df-messenger-wrapper').querySelector('#widgetIcon').setAttribute('style', 'bottom:30px');
  • CSS didn't work either, possibly due to the #shadow-root (open) issue. You can view the unsuccessful attempt here.
javascripthtmlcssdialogflow-es

Answer №1

If you're looking to move the location of your icon, I have a JavaScript solution for you.

dfMessenger.addEventListener('df-messenger-loaded', function(event) {
    dfMessenger.renderCustomText('Welcome to the updated version of Dexter');
    document.querySelector('df-messenger').shadowRoot.querySelector('.df-messenger-wrapper').querySelector('#widgetIcon').style.bottom = "5vh";
});

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

Transferring data files through an ajax-based form submission

I am encountering an issue when trying to send a file to a server using AJAX for submission. Despite attempting various methods involving var xhr = new XMLHttpRequest(); and $.ajax({});, I consistently receive the error message Uncaught TypeError: Illegal ...

javascriptphpjqueryajaxforms

Can Highchart dynamically adjust color choices based on the quantity of data points available?

I am trying to figure out how to import a specific color palette into my column graph. I want to use different color palettes based on the number of data points in my graph - for 3 or fewer points, I want to use the top row colors, for 4 points I want to u ...

javascripthtmlcsshighcharts

Ways to remain on the same page even after submitting a form

I've been searching for a solution to my specific issue for days, but haven't had any luck. Can anyone provide assistance? I have a form on my website that is supposed to send an email when clicked, while also converting the div from a form to a ...

javascriptphphtmlajaxforms

Boost the frequency of updates in Meteor.observe

When Python writes to a database (mongo) every second in the setup, Meteor.js is expected to react immediately to the new record insertion. Issue: However, the use of cursor.observe() results in the console outputting only 4-5 seconds after the new record ...

javascriptnode.jsmongodbredismeteor

What is the best way to manage various versions of JS libraries across different branches?

As a novice developer, I dabble in creating applications for personal use. My go-to tools are the Quasar framework for the front end and Python for the back end. I maintain a git repository where the master branch houses my "production code," but now I am ...

javascriptgitvue.jsquasar-framework

Change the default values for grid column configurations in Ext JS globally

The Ext.grid.column.Column class contains the following configurations: draggable (Default: true) sortable (Default: true) menuDisabled (Default: false) Is there a way to globally change the default values of these configurations for all grid columns i ...

javascriptextjsextjs-grid

What is the method for determining the level based on the provided experience points?

I've created a formula that can calculate experience based on specific levels and another formula that calculates the level based on given experience. However, there seems to be an issue with the second function as it is not returning the expected val ...

javascriptmath

I'm encountering an issue with my function in Vuejs where it is only going through one loop before breaking out. How can I

I'm attempting to validate all items in the cart and disable the sell button if the item is already in the cart (I have this implemented for other functionalities). It seems like my loop is only iterating once before stopping. Any suggestions on how I ...

javascriptperformancevue.js

Decide on the chosen option within the select tag

Is there a way to pre-select an option in a combobox and have the ability to change the selection using TypeScript? I only have two options: "yes" or "no", and I would like to determine which one is selected by default. EDIT : This combobox is for allow ...

htmlangulartypescript

Tips for concealing JavaScript and web framework version details from Weppalyzer

To enhance security, we are looking to conceal all JS and Bootstrap information. I have employed the help of the Weppalyzer tool for this purpose. https://i.stack.imgur.com/iLMGF.png Does anyone know how to effectively hide these details? I attempted set ...

javascriptphplaravelsecuritytesting

Converting a table into div elements and subsequently reverting it back to its original table format

[STOP DOWNVOTING: NEW AND IMPROVED] Discovering a simple technique on stackoverflow to transform tables into divs has been quite enlightening. By assigning classes to each tag, such as: <table class="table"> the process of converting from table to ...

javascripthtmlcss

How to extract the date value from an HTML date tag without using a datepicker

Utilizing Intel's app framework means there is no .datepicker method available. The following code snippet generates the date widget within my app: <label for="startdate">Start Date:</label> <input type="date" name="startdate" id="star ...

javascripthtmlappframework

The combination of $.post and $J = jQuery.noConflict() does not seem to be functioning correctly

I'm struggling with sending data from JavaScript to PHP using the $.post method, while also having conflicts with WordPress and using $J = jQuery.noConflict(). Here's what I have in my JavaScript: $J = jQuery.noConflict() x=1 $J.post('/the ...

javascriptphpjquerywordpresspost

Losing focus issue with Material-UI TextField occurs constantly with every onChange event

I am in the process of developing a new component: https://i.stack.imgur.com/czM9i.png This component will consist of an array of objects, each representing a prescription. Each object will include the medicine name selected from a dropdown and a text fi ...

javascriptreactjsmaterial-uitextfield

Issue with activating a Modal through a button inside a table row on React

I'm currently working on two files: Modal.js and Users.js. Users.js features a table with an API get query linked to it, and in the last column of the table, there's a dropdown for each row that contains three buttons: View, Edit, and Delete. My ...

javascriptreactjscore-ui

Function defined as an AngularJS component

I am facing an issue where my component is not initializing when I create it with a function that returns a component object. Can someone please help me understand the difference between these two situations? Html: <div ng-app="demoApp"> <navb ...

javascriptjqueryangularjsangular-components

Transferring information from the router to the server file using Node.js and Express

I am in the process of creating a web application using node.js, and I need to transfer data from my router file, which handles form processing, to my server file responsible for emitting events to other connected users. router.js module.exports=function ...

javascriptnode.jsexpress

How can I retrieve the selected items from a Listbox control?

Currently, I am working on an ASP.NET application using C#. One of the features in my project involves a Grid View with a Listbox control. The Listbox is initially set to be disabled by default. My goal is to enable and disable this control dynamically bas ...

c#javascriptjqueryasp.netlistbox

Customizing HTML Select Elements

Can the HTML Select attribute be customized to have a flatter appearance? Although I can set the border to be 1px solid, the dropdown part still appears 3D and unattractive. ...

htmlcss

Can someone explain why the min-width property is not being respected by the <input> element?

Visit this link for the code The text field in the provided link should only be 10px wide but it is currently displaying a width of 152px. Here is the code snippet: .input { width: 100%; box-sizing: border-box; } .cont { padding: 2px; } .main ...

htmlcss