Before you start: For information on setting up and configuring the Modal Sidebar, see Using the Modal Sidebar.
Display Custom Sidebar Content
Display or update the sidebar using your own HTML.
gateInstance.displayModalSidebar('<h2>Sidebar title</h2><p>Sidebar copy.</p>');
If the sidebar is already visible, the supplied HTML replaces the existing content.
Display the Configured Sidebar
Display the sidebar content configured on the gate.
gateInstance.displayModalSidebar();
If no sidebar content has been configured, the sidebar will not be displayed.
Hide the Sidebar
Hide the sidebar and return the modal to its standard layout.
gateInstance.hideModalSidebar();
Example
Display custom sidebar content when a gate is ready.
window.addEventListener('gcdcGateReady', function(event) {
var gateInstance = event.detail;
if (gateInstance.id === 'GATE_ID') {
gateInstance.displayModalSidebar('<h2>Sidebar title</h2><p>Sidebar copy.</p>');
}
});
If your JavaScript executes after Formulayt has already loaded, retrieve the gate first.
gcdc('getGateByID', 'GATE_ID', function(gateInstance) {
gateInstance.hideModalSidebar();
});
Need some inspiration?
See Modal Sidebar Design Ideas for examples of how you can use the sidebar for branding, messaging, imagery, and other content.