Voiceflow Agent to Convocore Integration

Connect conversational logic engineered in Voiceflow into Convocore's deployment platform. Customize the chat widget appearance with custom botanical background imagery, spherical knight avatars, dynamic button layouts, and brand color tokens.

Voiceflow API Key Convocore Custom CSS Nature Background & Avatars

Voiceflow Prototype Canvas (Raw Source)

Run Mode

Run

Welcome to XYZ! 👋
I'm here to help you. How can I assist you today?

Convocore Customized Chat Widget (Branded Deployment)

✨ Styled Target

test

Your virtual assistant.

test

Your virtual assistant.

Hi there! I'm here to help you with any questions you have. What can I assist you with today?

Chat Background Customizer

Background Preset

Custom Image URL

Upload Image Asset

Background Opacity: 38%

Background Blur: 4px

Avatar Manager (Tri-Touchpoint Sync)

Avatar Preset

Custom Avatar Image URL

Upload Avatar File

Synchronized Touchpoints

✅ Launch Avatar (Floating trigger bubble)
✅ Header Avatar (Top title banner)
✅ In-Chat Avatar (Rendered beside assistant response turns)

Buttons Layout (Convocore Documentation Spec)

Select Button Arrangement

Documentation Insight: Vertical is optimal for mobile devices and multi-word action prompts. In-Footer docks choices at the bottom of the widget to encourage continuous user guided discovery without cluttering chat history.

Color Palette & Branding Tokens

Primary Theme Color

Agent Title

Agent Subtitle

Footer Branding / Attribution

Voiceflow Dialog Management Runtime Gateway

Convocore communicates directly with Voiceflow's General Runtime at POST /state/user/:userID/interact. Enter your authentic Voiceflow credentials below, or toggle between Live and Resilient Offline Mock mode.

Voiceflow API Key (Project Auth Token)

Voiceflow Project ID

Version ID

Ready for interaction

Gateway Interaction Payload Trace:

// Awaiting interaction dispatch...

Convocore & Voiceflow 8-Point Architecture Diagnostic Suite

Automated verification verifying that credentials, payloads, multi-tier avatar synchronization, background contrasts, and fail-closed fault tolerance adhere to production guidelines.

Test #	Diagnostic Check	Validation Criteria	Status

Export Convocore Embed Code & Custom CSS Stylesheet

Website Embed Snippet (Place inside <body> of your web project):

<script src="https://convocore.ai/widget.js" data-agent-id="agent_66e850b5e9f1a234" data-voiceflow-project="66e850b5e9f1a23456789abc" data-theme="custom" data-primary-color="#0070f3" data-bg-image="https://cdn.convocore.ai/assets/nature-background.png" data-avatar="https://cdn.convocore.ai/assets/knight-avatar.png" async ></script>

Custom CSS Overrides (Convocore Dashboard > Theme > Custom CSS):

/* Convocore Custom CSS Overrides */ .convocore-widget { border-radius: 20px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22); } .convocore-header { background: var(--convocore-primary); color: #ffffff; } .convocore-chat-viewport { background-image: url('assets/s70/nature-background.png'); background-size: cover; background-position: center; } .convocore-pill-btn { background: var(--convocore-primary); color: #ffffff; border-radius: 12px; font-weight: 600; }