A panel that slides in from the edge of the screen when its trigger button is clicked (or automatically, using the shared autoOpen settings).
<button formsappId="69d4bd130b443bda40c8f65a"></button>
<script src="https://cdn.formsapp.io/embed.js" type="text/javascript" async defer onload="new formsapp('69d4bd130b443bda40c8f65a', 'slider', {'overlay':'rgba(45,45,45,0.5)','button':{'color':'#ff9e24','text':'Click me!'},'width':'767px','height':'100vh','align':'right'}, 'https://eu.forms.app');"></script>The <button formsappId="..."> element is the visible trigger; the script styles it using the button option and opens the slider when it's clicked.
| Option | Description |
|---|---|
overlay | Background dim color behind the panel, as an rgba() value. |
button.color / button.text | Styling for the trigger button. |
width / height | Size of the sliding panel. height: '100vh' fills the full viewport height. |
align | Which edge the panel slides in from: 'left' or 'right'. |
The slider also supports the shared autoOpen and openingAnimation settings described in Embed options.
- Embed options for the other layouts.
- Examples for React, Next.js, Vue, and Kotlin.