CTA Button
CTA button displays a text label either inside the widget overlay or outside below the container. It has no default action — behavior is defined entirely through onClick. Placement can switch between inside and outside automatically based on widget size using the adaptive option. Pass false to disable.
Config
| Property | Type | Description |
|---|---|---|
text | string | Button label text |
placement | ScenaCtaButtonPlacement | inside or outside the widget container |
adaptive | ScenaCtaButtonAdaptive | false | Responsive placement rules |
aria | Partial<ComponentAriaProps> | ARIA attributes |
onClick | (event: Event) => void | Click handler |
customClasses | Partial<ScenaCtaButtonComponentClasses> | Custom CSS classes |
customStyles | Partial<ScenaCtaButtonComponentStyles> | Custom inline styles |
Example
[scena] cta:click log.await scena.mount({
video: { src: '/video.mp4' },
ctaButton: {
text: 'Get in touch',
onClick: (event) => {
console.log('cta:click')
},
},
});
Placement
The button can be placed inside the widget overlay or outside below the container:
// Inside the widget
await scena.mount({
video: { src: '/video.mp4' },
ctaButton: {
text: 'Contact us',
placement: ScenaCtaButtonPlacement.INSIDE,
},
});
// Outside, below the widget
await scena.mount({
video: { src: '/video.mp4' },
ctaButton: {
text: 'Contact us',
placement: ScenaCtaButtonPlacement.OUTSIDE,
},
});
Adaptive placement
The adaptive option changes placement based on the widget size. This is useful when the button doesn't fit inside smaller sizes:
await scena.mount({
video: { src: '/video.mp4' },
ctaButton: {
text: 'Contact us',
placement: ScenaCtaButtonPlacement.INSIDE,
adaptive: {
sizes: [ComponentSize.XS, ComponentSize.SM],
placement: ScenaCtaButtonPlacement.OUTSIDE,
},
},
});
When the widget is xs or sm, the button moves outside. At md and above, it stays inside.
Disabling
await scena.mount({
video: { src: '/video.mp4' },
ctaButton: false,
});
Customization
Both customClasses and customStyles accept root and button as target keys.
customClasses accepts a string, array, or object:
await scena.mount({
video: { src: '/video.mp4' },
ctaButton: {
text: 'Buy now',
customClasses: {
root: 'my-cta-wrapper',
button: 'bg-indigo-600 text-white',
},
},
});
customStyles accepts a CSS string or a CSSStyleDeclaration-compatible object:
await scena.mount({
video: { src: '/video.mp4' },
ctaButton: {
text: 'Buy now',
customStyles: {
root: {
marginTop: '8px'
},
button: {
background: '#013EFB',
borderRadius: '100%'
},
},
},
});
Interface
interface ScenaCtaButtonProps {
text: string;
size: ComponentSize;
placement: ScenaCtaButtonPlacement;
adaptive: ScenaCtaButtonAdaptive | false;
aria: Partial<ComponentAriaProps>;
onClick: (event: Event) => void;
customClasses: Partial<ScenaCtaButtonComponentClasses>;
customStyles: Partial<ScenaCtaButtonComponentStyles>;
}