Design & Video walkthrough
CTA Feature: UX and Design Improvements
1. Terminology & Text Improvements
Rename “CTA” to “Call to Action” throughout the UI for clarity, especially for first-time users.
2. UI/UX Cleanup
Remove duplicate “Add New CTA” buttons – show a single, clear empty state when no CTAs exist.
Gray out the “no CTAs” state to indicate inactive/empty content visually.
3. Update CTA Creation UX
Move CTA editing out of the side pane – instead use an inline editor below the video (similar to how chapters are handled).
Show the video during CTA creation, enabling users to watch the video while editing.
Remove the “video duration” field from the editor – video length is visible in the player.
4. New CTA Editor Fields
-
Include the following fields in the new CTA editor:
Button Text
Start Time
End Time
Position
Button Color
Text Color
Use the existing color picker component for button and text color selection.
5. CTA Color Customization
Allow users to customize button and text colors (beyond the current light/dark theme options).
Remove the misleading gray overlay in the CTA preview during editing and recording—ensure visual consistency with the final video.
6. “Show Only at End” Toggle
-
Add a toggle switch labeled “Show only at end of video”.
-
When enabled:
Hide the start and end time fields.
Automatically place the CTA on the final screen after the video ends.
Display duration as “End of Video”.
-
Allow users to create separate CTAs for mid-video and end-of-video scenarios.
7. Live Preview of CTA Before Save
-
Implement real-time preview functionality in the CTA editor.
Changes made to CTA (e.g., text, timing, color) should immediately reflect on the video preview without needing to click “Save”.
This mirrors existing behavior in the theme editor and competitors like Wistia.
Ensure that all field changes (start time, button text, color, etc.) reflect live in the UI before committing.