How do I hide the Rhinogram Web Form under my own button?
If you would like to have further control over Rhinogram's Web Form styling by separating the placement of the button and the web form, your web developer will need to do some additional work on their end.
First, log in to your Rhinogram account and go to your Web Form configuration screen. Select Embed Form and set the web form position to 'Free-form (advanced)' and toggle the 'Hide Call To Action Button' switch.
This will cause the form to be visible on load, and not have the ability to be closed. Your web developer will need to use their own CSS stylesheet to target the class '.rhinogram-widget--freeform', and set the visibility to 'visibility: hidden;'. They will then need to create their own button the screen that toggles the visibility to 'visibility: visible;'
Note: The 'X' in the top right corner of the webform will NOT be available when the 'Hide Call To Action Button' is toggled on. Your web developer has 2 options for closing the web form:
- The custom button that toggles the visibility to visible can also toggle the visibility back to hidden
- Position a custom 'X' button on top of the webform that toggles the visibility to hidden.
The Free Form Option:
You have the ability to enable ‘Free-form’ placement of the embedded web widget in order to hide the button and place the form wherever they want on their site. In order for things to render properly, there are two options: (You may also pass this along to your web developer)
First, the CSS for the existing placement can be overridden, allowing you full control over where this form lays on the page. In order to do that, the class ‘.rhinogram-widget--freeform’ needs a property of ‘position: absolute !important’ and a combination of a left, right, top and bottom value with the ‘!important’ flag as well. From here, you will need to play around with the positioning to get it situated right.
Note: Remember to check for different screen sizes for mobile and tablet use to ensure the placement is where you want it. This is the easiest to set up, but least reliable option for across devices
The second option is to insert an iframe into the page, which in turn calls the Rhinogram script. The iframe can be positioned wherever you would like the webform to show but your web developer of yourself will need to have considerable knowledge on how to set one up and how to host it. This is the hardest to set up, but the most reliable option across devices.
An alternative, more middle of the road option is to separate the placement of the button and the webform as long as you are okay with the webform being docked in the corner of the screen.
A Rhinogram Super Users from the practice will set the webform configuration in the channel to ‘Free-form (advanced)’ and toggle the ‘Hide Call To Action Button’ switch
This will cause the form to be visible on load, and not have the ability to be closed. Your web developer will need to use their own CSS stylesheet to target the class ‘.rhinogram-widget--freeform’, and set the visibility to ‘visibility: hidden;’. They will then need to create their own button the screen that toggles the visibility to ’visibility: visible;’
Note: The 'X' in the top right corner of the webform will NOT be available when the 'Hide Call To Action Button' is toggled on. Your web developer has 2 options for closing the web form:
- The custom button that toggles the visibility to visible can also toggle the visibility back to hidden
- Position a custom 'X' button on top of the webform that toggles the visibility to hidden.