I'd like to build a slideshow tutorial in a modal.
The number of slides is dynamic based on certain customer conditions. For this prototype, we will build versin 1 and version 2 (I want to be able to switch between them when I test the prototype).
Each slide in the tutorial will have a Header, one main image or two side by side images, body content, and primary and secondary CTAs (as detailed in the below requirements)
Please build the tutorials detailed below.
Scenario 1 is for a customer that HAS ALREADY PURCHASED AI Assist or WhatsApp in Aircall
Scenarion 2 is for a customer that HAS NOT PURCHASED AI Assist or WhatsApp in AIrcall
Here are the requirements:
Tutorial Slide Requirements:
Slide 1:
Header: Grant Users Add-on Access by Assigning Licenses
Image: Two side by side images; use a placeholder in the prototype
Body Content: What’s changing: Admins must assign AI Assist and WhatsApp in Aircall licenses to individual Users.
Your account will have a balance of license available to assign. Additional licenses can be purchased directly in the dashboard.
AI Assist: AI Insights (e.g. Call Summaries, Key Topics, Sentiment Analysis) and Aggregated Insights (e.g. Trackers, Scorecard Evaluations) are accessible to Users with an assigned license.
WhatsApp in Aircall: Users with an assigned license can send WhatsApp messages. All Users (regardless of assignment) can read WhatsApp messages.
IF Account has ALREADY purchased AI Assist OR WhatsApp in Aircall Pagination → Slide 1 of 3
IF Account HAS NOT purchased AI Assist OR WhatsApp in Aircall Pagination → Slide 1 of 4
Primary CTA → Next
Slide 2: Header: How to Assign a License to a User
Image: Single hero image. User placeholder
Body: Step 1: Go to Admin Dashboard → Users Step 2: Find the User that needs access and jump to the “Assigned Add-ons” column in their row. Click the “Assign an Add-on” (or “Edit” if they’ve been assigned an Add-on button Step 3: Use the Add-on toggles to grant the User access. Click Confirm to complete assignment
Users can immediately access the Add-on once assignment is confirmed.
When all licenses have been assigned, Admins can purchase more by simply toggling on Add-on access for the Users that need it. The required licenses will be added to your account.
IF Account has ALREADY purchased AI Assist OR WhatsApp in Aircall Pagination → Slide 2 of 3
IF Account HAS NOT purchased AI Assist OR WhatsApp in Aircall Pagination → Slide 2 of 4
Primary CTA → Next Secondary CTA → Back
Slide 3: Header: How to Assign Licenses to Multiple Users
Image: Single hero image. User placeholder
Body: Step 1: Go to Admin Dashboard → Users Step 2: Click More Actions → Manage Licenses in the top right corner of the Users page Step 3: For each Add-on, search the names of the Users who need access. Press Enter to add them to the assign list Step 4: Click Confirm to assign licenses
Users can immediately access the Add-on once assignment is confirmed.
When all licenses have been assigned, additional licenses will be added to your account to ensure all Users in the assign list are granted access.
IF Account has ALREADY purchased AI Assist OR WhatsApp in Aircall Pagination → Slide 3 of 3
Primary CTA → Assign Licenses Secondary CTA → Close
IF Account HAS NOT purchased AI Assist OR WhatsApp in Aircall Pagination → Slide 3 of 4
Primary CTA → Next Secondary CTA → Back
Slide 4 (Account Has NOT Purchased AI Assist OR WhatsApp in Aircall):
Header: Explore Add-ons!
Image: Side by side images. Use placeholder
Left Image Caption: Drive sales and customer support results with AI-powered call coaching and business intelligence.
Right Image Caption: Instantly message your customers worldwide with WhatsApp in Aircall.
CTAs under each image with copy "Explore"
Pagination → Slide 4 of 4
Primary CTA → Close Secondary CTA → Back
I'll create a slideshow tutorial modal with dynamic slides based on customer conditions. This will include two scenarios: one for customers who have already purchased AI Assist or WhatsApp, and another for those who haven't.
Use the toggle switch on the main page to select the customer scenario: