Adding the Voiceline Widget with Elementor
How to add the widget
- Edit any page with Elementor.
- Search for the widget named VoiceLine.
- Drag it into the page.
- Save or update the page.
What the widget does
- The widget outputs the full Voiceline form.
- The frontend flow is simple: Record, Stop, Listen, Send.
- If enabled in the global settings, the widget can also show fields for Name, Email, Phone, and the Privacy consent checkbox.
Skin preset
- The widget includes the following skin presets:
- Default
- Studio Black [PREMIUM]
- Cassette Retro [PREMIUM]
- Console Pro [PREMIUM]
- Clean Lab [PREMIUM]
- Pocket Recorder [PREMIUM]
- Dot Matrix [PREMIUM]
- Field Device [PREMIUM]
- Neon Deck [PREMIUM]
- Minimal White [PREMIUM]
Default skin styling controls
- The Default skin exposes detailed Elementor style controls.
- You can customize the Widget Background, including background, tint, gradient top, gradient bottom, border, main text, secondary text, border radius, and padding.
- You can customize the Display / Recorder Area, including display background, gradients, border, visual area background, visual area border, microphone button background, timer background, timer border, timer text, status text, and display border radius.
- You can customize the Form Fields, including fields background, text, placeholder, border, hover border, focus border, labels color, and border radius.
- You can also control Typography for timer, status, and buttons.
Premium skins
- Premium skins are meant to provide ready-made styled layouts.
- The advanced Elementor color controls are mainly intended for the Default skin.
- If a premium skin is selected without a valid Premium entitlement, the skin is blocked and the widget falls back to standard behavior.
- If Premium is disabled, you can see the skins in the Elementor editor but they'll be locked in frontend.
Best practice
- Start with the Default skin and test the full submission flow first.
- After everything works, move to visual styling or Premium skin selection.
