TextConnect Widget
Hello,
I spoke with a few representatives regrading the TextConnect widget from Weave. Overall, it's a great feature, but there are a few things that I would like to request as a feature for the widget.
Currently, the widget can't be resized and it doesn't look good on mobile. It takes up a substantial portion of the bottom of the screen on mobile. Can you make it possible to resize the widget?
The widget shows a message that says "Click to send us a message." This is cool and all, but on mobile, again, it takes up a substantial part of the mobile screen.
Anything that's behind the widget is inaccessible. For example, if you scroll down to the bottom footer (where all a website's links are), none of those links are clickable (or tappable on mobile) because the widget reserves the entire bottom row space. There are important website links in the footer that need to be accessible by our patients.
Can you implement a feature that allows the widget to remain on the bottom right corner of the screen without rendering the rest of the mobile page (the whole left side) useless?
I can send pictures/videos to explain this better, please contact me for these as I cannot upload them on here.
Thank you.
dentist
shared this idea
-
Jimmy Chang commented
I was able to figure out some simple script to get the desktop and mobile icon to scale down and positioned to how I wanted it. Feel free to insert your own code and edit however you like.
<script>
var script = document.createElement('script');
script.src = "https://book.getweave.com/text-connect/YOUROWNCODE/widget.js";
script.addEventListener('load', function() {
// Your code here will run once the script has loaded
checkMobile();
});
script.addEventListener('error', function() {
// Your code here will run if there's an error loading the script
console.error('Error loading script');
});
document.head.appendChild(script);function checkMobile() {
var isMobile = window.matchMedia("(max-width: 768px)").matches;
var iframe = document.getElementById('iframe-weave-widget-button');
if (isMobile && iframe) {
iframe.style.transform = 'scale(0.45)';
iframe.style.position = 'fixed';
iframe.style.right = '-85px'; // Negative right position
iframe.style.bottom = '-30px'; // Negative bottom position
} else if (iframe) {
iframe.style.transform = 'scale(0.7)';
iframe.style.position = 'fixed';
iframe.style.right = '-40px'; // Negative right position
iframe.style.bottom = '-7px'; // Negative bottom position
}
}
</script> -
Hello, I would like to second this need.
1) need full customization to CSS on the script level rather than behind the scenes. give us access to width and height for the icon and the form. let us change the colors. these are very very quick and easy to deploy on a css basis.
2) mobile is WAY too big.
2) the text Click to send us a message NEEDs to fade away instead of staying there until clicked.Below is a temporary workaround until Weave corrects it on their backend. I was able to scale down the icon on both desktop and mobile and reposition the icon. The text is built in the button script and Weave is the only people who can modify that so as a result the text is also scaled down and blurry.
Begin Script
var script = document.createElement('script');
script.src = "https://book.getweave.com/text-connect/YOUROWNCODE/widget.js";
script.addEventListener('load', function() {
// Your code here will run once the script has loaded
checkMobile();
});
script.addEventListener('error', function() {
// Your code here will run if there's an error loading the script
console.error('Error loading script');
});
document.head.appendChild(script);function checkMobile() {
var isMobile = window.matchMedia("(max-width: 768px)").matches;
var iframe = document.getElementById('iframe-weave-widget-button');
if (isMobile && iframe) {
iframe.style.transform = 'scale(0.45)';
iframe.style.position = 'fixed';
iframe.style.right = '-85px'; // Negative right position
iframe.style.bottom = '-30px'; // Negative bottom position
} else if (iframe) {
iframe.style.transform = 'scale(0.7)';
iframe.style.position = 'fixed';
iframe.style.right = '-40px'; // Negative right position
iframe.style.bottom = '-7px'; // Negative bottom position
}
}
End script