Description: Click any buttons on a specific page >> Open Elfsight Form Builder Widget.
#1. First, you need to install Form Builder Widget. Elfsight will give you some code to add to Squarespace, you can add it to Page Header Code Injection, something like this.
#2. Make sure you use this option in Form Builder widget.
#3. You will have a result like this
#4. Install Squarespace ID Finder to find ID of Button Blocks.
In my example, we will have
#block-yui_3_17_2_1_1718350453372_6526
#block-yui_3_17_2_1_1718350453372_11077
#block-yui_3_17_2_1_1718350453372_14462
#5. Use this code to Page Header Code Injection, under #1 code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).on('click', '#block-yui_3_17_2_1_1718350453372_6526, #block-yui_3_17_2_1_1718350453372_11077, #block-yui_3_17_2_1_1718350453372_14462', function(event) {
event.preventDefault();
$('button.es-forms-floating-button').click();
});
</script>
#6. Use this code to Custom CSS box
button.es-forms-floating-button {
visibility: hidden;
}
to hide this button
#7. Result
When you click one of these Chat with Us buttons, the Form Builder will appear.
#8. Explain code a bit
