If you'd like to really customize or tailor the behavior of the text widget so that you can use other elements (e.g. links or buttons) to display the widget, you can use the following code to change the behavior of the widget.
Warning: if you do this, please reach out to our support team and let us know. Future changes to the widget may cause this behavior to stop working. By letting us know, we can coordinate with you.
Place these style overrides in your <head> tag
These overrides will hide the widget by default. In addition, they handle changing the display of the widget on mobile devices. Keep in mind, when using this custom format, all users will receive the form for starting a conversation. The standard behavior for mobile devices is for the Text Us widget to skip the form and start a conversation directly within the mobile device's text messaging application.
<style>
.numberai-text-widget { display: none !important; }
@media only screen and (max-width: 768px) {
.numberai-text-form {
bottom: 0px !important;
left: 0px !important;
right: 0px !important;
margin: 0px !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
border-radius: 0px !important;
border: none !important;
box-sizing: border-box;
}
}
</style>
Insert this script in your <head> tag
This script has a function that will toggle the displaying of the text form.
<script>
function toggleTextForm() {
var n = document.getElementsByClassName('numberai-text-form')[0];
if (!n) return;
n.style.display = (n.style.display === 'block' ? 'none' : 'block');
}
</script>
Have an element on your page toggle the form's visibility
Within your page, place an element that will call the toggleTextForm function when clicked. Here's an example:
<button onclick="toggleTextForm()">Toggle</button>