@php $w = $widget; $defaults = [ 'id' => $w?->id ?? null, 'name' => $w?->name ?? '', 'mode' => $w?->mode ?? 'ai', 'assistant_id' => $w?->assistant_id ?? null, 'target_whatsapp_cc' => $w?->target_whatsapp_cc ?? '', 'target_whatsapp_number' => $w?->target_whatsapp_number ?? '', 'prefilled_message' => $w?->prefilled_message ?? "Hi, I'd like to know more.", 'position' => $w?->position ?? 'bottom_right', 'button_color' => $w?->button_color ?? '#075E54', 'button_image_url' => $w?->button_image_url ?? '', 'header_title' => $w?->header_title ?? 'Chat with us', 'header_bg' => $w?->header_bg ?? '#075E54', 'header_text_color' => $w?->header_text_color ?? '#FFFFFF', 'welcome_message' => $w?->welcome_message ?? 'Hi! How can we help today?', 'message_bubble_color' => $w?->message_bubble_color ?? '#FFFFFF', 'message_text_color' => $w?->message_text_color ?? '#222222', 'body_bg_kind' => $w?->body_bg_kind ?? 'color', 'body_bg_color' => $w?->body_bg_color ?? '#ECE5DD', 'body_bg_image_url' => $w?->body_bg_image_url ?? '', 'auto_open' => (bool) ($w?->auto_open ?? false), 'button_label' => $w?->button_label ?? 'Send message', 'action_button_bg' => $w?->action_button_bg ?? '#075E54', 'action_button_text_color' => $w?->action_button_text_color ?? '#FFFFFF', 'collect_name' => (bool) ($w?->collect_name ?? true), 'collect_email' => (bool) ($w?->collect_email ?? false), 'collect_phone' => (bool) ($w?->collect_phone ?? false), ]; $embedToken = $w?->embed_token ?? null; $assistantsJs = $assistants->map(fn($a) => ['id' => $a->id, 'name' => $a->name]); @endphp {{-- Sticky header — same shape as /wa-campaigns/create --}}
Chatbot widgets / {{ $mode === 'edit' ? 'Edit' : 'New' }}
{{ $mode === 'edit' ? 'Edit' : 'Build a' }} chatbot {{ __('widget') }}
{{ $mode === 'edit' ? 'Saved' : 'Draft / unsaved' }}
{{-- ============ MAIN CARD ============ --}}
{{-- ===== Stepper ===== --}}
1 {{ __('Setup') }}
2 {{ __('Look') }}
3 {{ __('Voice') }}
4 {{ __('Launch') }}
{{-- ===== Step panes ===== --}} {{-- Cap each pane's content at ~880px so 2-column inputs render at a comfortable ~420px each instead of stretching way wide. --}}
{{-- STEP 1: SETUP --}}
01 {{ __('Widget setup') }} {{ __('required') }}
{{ __("For your team. Visitors don't see this label.") }}
{{ __('Where the round chat bubble floats on your site.') }}
@foreach (['ai' => ['Smart agent', 'Trained AI answers right in the browser.', 'M3 5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H8l-3 2v-2a2 2 0 0 1-2-2z'], 'whatsapp' => ['WhatsApp deep-link', 'Send the visitor into the WhatsApp app to chat.', 'M12 2C6.48 2 2 6.48 2 12c0 1.96.57 3.79 1.55 5.34L2 22l4.78-1.5'], 'both' => ['Smart + WhatsApp', 'Visitor picks — chat here or open WhatsApp.', 'M3 5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H8l-3 2v-2a2 2 0 0 1-2-2z']] as $val => $info) @endforeach
{{ __("Don't see one?") }} {{ __('Build a smart agent') }} first.
{{-- Same intl-tel-input picker /devices uses. The `.wa-iti-wrap` wrapper triggers the CSS sizing that gives the dial-code badge enough breathing room — see resources/css/wadesk.css. --}}
{{ __('Pick the country flag — the dial code is added automatically.') }}
{{ __('The visitor lands in WhatsApp with this message already typed.') }}
{{-- STEP 2: LOOK --}} {{-- STEP 3: VOICE --}} {{-- STEP 4: LAUNCH --}}
{{-- ===== Footer nav ===== --}}
{{ __('Step') }} 1 of 4
{{-- ============ LIVE PREVIEW ASIDE ============ --}}