EqualWeb

Custom buttton

NOTE - When creating a button of your own, it is your responsibility to make it accessible, to do so, here are some important guidelines:

Add an open MDN Web Docs documentation page. aria-label attribute if the button does not have text inside or is not associated with a label.
If you are using a <div> or <a> element for your button, provide it with open MDN Web Docs documentation page. role button .
Verify with a WCAG 2.1 contrast checker that the colors of the button are well contrasted.

Creating your own custom button for version 5.x.x and above

Creating a custom button with ID
You can create a custom button with the ID INDmenu-btn in your HTML or application code. The widget will automatically use this button instead of the default one.
1. Create your own button in the DOM, with the same ID as our original button: INDmenu-btn.
2. Ensure your button is placed before our script in the DOM to override our button and trigger it behind the scenes once clicked.
```
						
							<body>
								...
								
								
								...
								
							</body>
						
					
```
Hiding the button by default
In your implementation code, add the hideBtn flag with the value true. This will ensure that the button is hidden by default.
```
						
							
							<script>
								window.interdeal = {
									hideBtn: true,
									...All_other_configurations,
								}
							</script>
						
					
```
Provide your new button the following onclick method:
This method will open the accessibility menu.

reating your own custom button for Version 4.x.x and below

Create a <button> of your own with the ID of our button INDmenu-btn. It will add our click event to your button, and will not create a new button. IMPORTANT : Make sure the button exists in the page before our script loads! otherwise, it won't work.

Create a <button> of your own and hide our button with the following CSS:

Recommended :
Add this snippet to your css file:

									
#INDmenu-btn {
	display: none !important;
}
#INDmenu-btn {
	display: none !important;
}
							

#INDmenu-btn {
	display: none !important;
}

OR

You can add inline css with javascript as well:

document.getElementById('INDmenu-btn').style.display = 'none!important';

document.getElementById('INDmenu-btn').style.display = 'none!important';

document.getElementById('INDmenu-btn').style.display = 'none!important';

You can use one of these method to open the menu:

Provide your new button the following onclick method:
```
								

								
							
```
This method will open the accessibility menu.
Once clicked on your button, click behind the scenes on our hidden button ( #INDmenu-btn ).

Equalweb documentation

Custom buttton

Creating your own custom button for version 5.x.x and above

Creating a custom button with ID

Hiding the button by default

reating your own custom button for Version 4.x.x and below

Customize button reference

Button Examples

Additional functionality options.