Improvements to CTA feature

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.