This example is the Outgrow floating rectangle. It will be placed at the bottom of the page. We can choose to align it to the left, center, or right side. We suggest using the right side as the left side has the cookie consent icon, and placing it in the center will cover the back to top button. Please make sure no chat bots are present on this page so that the floating rectangle doesn't cover it.
When the user clicks the rectangle, it will animate and open in a tall rectangle. When the user clicks the close button, it will hide and reappear as the smaller rectangle we initially saw.
Issues that need to be address when we embed on a page
- Accessibility: The close button doesn't have a "label" so we need to add an aria-label tag to it
- Bill 96: The close button text is hard coded to EN
- Accessibility: The iframe tile will always need to be updated in EN & FR to match what this is actually for. All it does is pull the name we give it in Outgrow
Other issues
- We must always enable the close button as the container is too big on mobile.
Heading of this floating rectangle
Help text