Short answer
Add attributes to the script tag: data-label for the text, data-color for the color, and data-position="left" to move it to the bottom left.
Attributes
- data-label changes the text, for example data-label="Book a demo". The first 40 characters show.
- data-color sets the color, as a hex code like data-color="#2563eb" or a color name like navy. Other formats, such as rgb(), fall back to near-black. The text is always white, so pick a dark color.
- The button sits at the bottom right. data-position="left" moves it to the bottom left.
- data-language="es" opens the demo in Spanish, for a site in that language. It takes a two-letter code from the language list, and visitors can still pick another. If you picked a start language in Demo settings, the copied snippet already has it. Choosing the start language
Example
<script src="https://app.demopage.io/embed.js" data-demo="your-link" data-label="Book a demo" data-color="#2563eb" data-position="left" async></script>Good to know
- On phones, the demo opens full screen.
- Button label in Demo settings names a different button: the call to action inside the demo, which opens your Button URL. The guide name and button
- To use a button you design yourself, see Use your own button.
- DemoPage's name inside the demo room itself stays. See Does the demo show DemoPage branding?
Related questions
Didn't answer your question?
Talk to us with your demo link and the email you signed up with, or write to hello@demopage.io. We'll answer, and add it to the Help Center.