Notre Quizz ChatBot IA Secureholiday
Mise en ligne en janvier 2026 !
Notre ChatBot IA est nativement lié à votre base de données Secureholiday. Automatiquement alimenté par plus de 5000 questions/réponses, votre outil est fonctionnel en 48H. Un réel accélérateur des ventes qui répondra à vos clients 24/7, dans leur langue, en concentrant le temps de votre personnel d’accueil pour répondre aux demandes complexes et gagner en service client !
Deux approches pour distribuer vos hébergements efficacement
<script>
const questions = [
{
id: 'q1',
category: 'Perte de revenus',
icon: '💶',
question: "Combien de demandes de renseignements recevez-vous en dehors de vos horaires d'ouverture ?",
subtitle: "(soir, week-end, nuit)",
options: [
{ value: 0, label: "Moins de 5 par semaine", score: 1 },
{ value: 1, label: "5 à 15 par semaine", score: 3 },
{ value: 2, label: "15 à 30 par semaine", score: 5 },
{ value: 3, label: "Plus de 30 par semaine", score: 7 }
]
},
{
id: 'q2',
category: 'Charge de travail',
icon: '⏰',
question: "Combien d'heures par semaine votre équipe passe-t-elle à répondre toujours aux mêmes questions ?",
subtitle: "(tarifs, disponibilités, règlement, services, accès, horaires, draps, ménage...)",
options: [
{ value: 0, label: "Moins de 5 heures", score: 1 },
{ value: 1, label: "5 à 10 heures", score: 3 },
{ value: 2, label: "10 à 20 heures", score: 5 },
{ value: 3, label: "Plus de 20 heures", score: 7 }
]
},
{
id: 'q3',
category: 'Perte de revenus',
icon: '📈',
question: "Selon vous, quel pourcentage de demandes ne se transforme pas en réservation faute de réponse rapide ?",
options: [
{ value: 0, label: "Moins de 10%", score: 1 },
{ value: 1, label: "10% à 20%", score: 3 },
{ value: 2, label: "20% à 40%", score: 6 },
{ value: 3, label: "Plus de 40%", score: 8 }
]
},
{
id: 'q4',
category: 'Barrières linguistiques',
icon: '👥',
question: "Quelle part de votre clientèle ne parle pas français ?",
options: [
{ value: 0, label: "Moins de 10%", score: 1 },
{ value: 1, label: "10% à 30%", score: 3 },
{ value: 2, label: "30% à 50%", score: 5 },
{ value: 3, label: "Plus de 50%", score: 7 }
]
},
{
id: 'q5',
category: 'Efficacité',
icon: '⚠️',
question: "En haute saison, votre réception est-elle saturée par les appels et demandes ?",
options: [
{ value: 0, label: "Non, nous gérons facilement", score: 1 },
{ value: 1, label: "Parfois, aux pics de réservation", score: 4 },
{ value: 2, label: "Souvent, nous manquons des appels", score: 6 },
{ value: 3, label: "Oui, c'est ingérable", score: 8 }
]
},
{
id: 'q6',
category: 'Compétitivité',
icon: '📊',
question: "Vos concurrents utilisent-ils des outils digitaux avancés (chatbot, WhatsApp Business...) ?",
options: [
{ value: 0, label: "Non, personne dans ma région", score: 1 },
{ value: 1, label: "Un ou deux l'ont fait récemment", score: 4 },
{ value: 2, label: "Oui, plusieurs concurrents", score: 6 },
{ value: 3, label: "Oui, je me sens en retard", score: 8 }
]
},
{
id: 'q7',
category: 'Réservations directes',
icon: '💶',
question: "Quel pourcentage de vos réservations passe par des OTA (Campings.com, Pichtup, Booking...) ?",
subtitle: "avec leurs commissions élevées",
options: [
{ value: 0, label: "Moins de 20%", score: 1 },
{ value: 1, label: "20% à 40%", score: 3 },
{ value: 2, label: "40% à 60%", score: 6 },
{ value: 3, label: "Plus de 60%", score: 8 }
]
},
{
id: 'q8',
category: 'Expérience client',
icon: '👥',
question: "Vos clients peuvent-ils obtenir des informations instantanées 24/7 sur votre site web ?",
options: [
{ value: 0, label: "Oui, tout est automatisé", score: 0 },
{ value: 1, label: "Partiellement, en faisant une recherche poussée (FAQ statique)", score: 3 },
{ value: 2, label: "Non, ils doivent nous contacter", score: 6 },
{ value: 3, label: "Non, et nous perdons des clients", score: 8 }
]
}
];
let currentQuestion = 0;
let answers = {};
let showResults = false;
function handleAnswer(questionId, optionValue, score) {
answers[questionId] = { value: optionValue, score: score };
if (currentQuestion < questions.length - 1) {
currentQuestion++;
setTimeout(render, 300);
} else {
showResults = true;
setTimeout(render, 300);
}
}
function calculateResults() {
const totalScore = Object.values(answers).reduce((sum, answer) => sum + answer.score, 0);
const maxScore = questions.reduce((sum, q) => sum + Math.max(...q.options.map(o => o.score)), 0);
const percentage = (totalScore / maxScore) * 100;
return { totalScore, percentage };
}
function getRecommendation(percentage) {
if (percentage >= 70) {
return {
level: 'URGENT',
color: '#A52C2C',
title: 'Votre camping perd de la rentabilité chaque jour !',
description: 'Vos réponses révèlent des pertes significatives en revenus et en productivité. Notre chatbot peut vous faire gagner immédiatement en chiffre d\'affaires.',
icon: '🚨',
benefits: [
'Récupérer 30-40% des demandes hors horaires perdues',
'Libérer 15-20h de temps d\'équipe par semaine',
'Réduire la dépendance aux OTA et leurs commissions',
'Améliorer drastiquement l\'expérience client'
],
roi: 'ROI estimé : rentabilisé en 2-3 mois.<br><b> Le Chatbot de Ctoutvert répond à l\'ensemble de ces enjeux de rentabilité !</b>'
};
} else if (percentage >= 45) {
return {
level: 'RECOMMANDÉ',
color: '#F97316',
title: 'Un chatbot améliorerait significativement vos performances',
description: 'Vous avez des opportunités claires d\'optimisation. Un assistant IA vous permettrait de franchir un cap.',
icon: '📈',
benefits: [
'Capturer plus de réservations directes',
'Réduire la charge administrative',
'Offrir un service multilingue 24/7',
'Vous démarquer de la concurrence'
],
roi: 'ROI estimé : rentabilisé en 3-6 mois.<br><b> Le Chatbot de Ctoutvert répond à l\'ensemble de ces enjeux de performance !</b>'
};
} else {
return {
level: 'DIFFÉRENCIANT',
color: '#00AFAB',
title: 'Un chatbot reste un atout pour garder une longueur d\'avance',
description: 'Votre situation actuelle est gérable, mais un chatbot vous donnerait un avantage concurrentiel indéniable pour consolider votre croissance.',
icon: '✅',
benefits: [
'Anticiper les pics de saison',
'Moderniser votre image de marque',
'Améliorer la satisfaction client',
'Préparer votre développement'
],
roi: 'ROI estimé : rentabilisé en 6-12 mois.<br> <strong>Le Chatbot de Ctoutvert répond à l\'ensemble de ces enjeux différenciants pour vous !</strong>'
};
}
}
function restart() {
currentQuestion = 0;
answers = {};
showResults = false;
render();
}
function render() {
const app = document.getElementById('app');
if (showResults) {
const { percentage } = calculateResults();
const rec = getRecommendation(percentage);
const highScoreAnswers = Object.entries(answers)
.filter(([qId, answer]) => answer.score >= 5)
.map(([qId, answer]) => {
const q = questions.find(qu => qu.id === qId);
const opt = q.options[answer.value];
return `
<div class="bg-red-50 rounded-lg p-4 border border-red-200">
<div class="font-semibold text-red-800 text-sm mb-1">${q.category}</div>
<div class="text-gray-700 text-sm">${opt.label}</div>
</div>
`;
}).join('');
app.innerHTML = `
<div class="min-h-screen bg-gray-50 p-4 md:p-8">
<div class="max-w-4xl mx-auto">
<div class="bg-white rounded-2xl shadow-2xl overflow-hidden border-2 border-gray-100">
<div class="text-white p-8" style="background-color: ${rec.color}">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-3">
<span class="text-5xl">${rec.icon}</span>
<div>
<div class="text-sm font-semibold opacity-90">AVOIR UN CHATBOT EST POUR VOUS :</div>
<div class="text-2xl font-bold">${rec.level}</div>
</div>
</div>
<div class="text-right">
<div class="text-4xl font-bold">${Math.round(percentage)}%</div>
<div class="text-sm opacity-90">Taux de besoin</div>
</div>
</div>
</div>
<div class="p-8">
<h2 class="text-3xl font-bold text-gray-900 mb-4">${rec.title}</h2>
<p class="text-lg text-gray-600 mb-8">${rec.description}</p>
<div class="bg-gray-50 rounded-xl p-6 mb-6 border-2" style="border-color: #00AFAB">
<h3 class="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
<span style="color: #00AFAB">✓</span>
Notre Chatbot vous permet de :
</h3>
<ul class="space-y-3">
${rec.benefits.map(b => `
<li class="flex items-start gap-3">
<span style="color: #00AFAB">→</span>
<span class="text-gray-700">${b}</span>
</li>
`).join('')}
</ul>
</div>
<div class="bg-amber-50 border-l-4 border-amber-400 p-4 mb-6">
<p class="text-amber-800 font-semibold">💶 ${rec.roi}</p>
</div>
${highScoreAnswers ? `
<div class="border-t pt-6 mb-6">
<h3 class="text-lg font-bold text-gray-900 mb-4">Points clés identifiés :</h3>
<div class="grid md:grid-cols-2 gap-4">
${highScoreAnswers}
</div>
</div>
` : ''}
<div class="flex flex-col sm:flex-row gap-4">
<button onclick="restart()" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-4 rounded-xl transition">
🔄 Refaire le diagnostic
</button>
<a href="https://www.ctoutvert.com/fr/agent-conversationnel" class="flex-1 text-white font-bold py-4 rounded-xl transition shadow-lg text-center" style="background-color: #00AFAB">
Demander une démonstration gratuite
</a>
</div>
</div>
</div>
</div>
</div>
`;
} else {
const question = questions[currentQuestion];
const progress = ((currentQuestion + 1) / questions.length) * 100;
app.innerHTML = `
<div class="min-h-screen bg-gray-50 p-4 md:p-8">
<div class="max-w-3xl mx-auto">
<div class="mb-8">
<div class="flex justify-between items-center mb-2">
<span class="text-sm font-semibold text-gray-700">Question ${currentQuestion + 1} sur ${questions.length}</span>
<span class="text-sm font-semibold text-gray-700">${Math.round(progress)}%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="h-2 rounded-full transition-all duration-300" style="width: ${progress}%; background-color: #00AFAB"></div>
</div>
</div>
<div class="bg-white rounded-2xl shadow-2xl overflow-hidden border-2 border-gray-100">
<div class="p-6" style="background-color: #00AFAB">
<div class="flex items-center gap-3 mb-3">
<span class="text-4xl">${question.icon}</span>
<span class="text-sm font-semibold uppercase tracking-wide quiz-category">${question.category}</span>
</div>
<h2 class="text-2xl md:text-3xl font-bold leading-tight quiz-title">${question.question}</h2>
${question.subtitle ? `<p class="mt-2 text-sm quiz-subtitle">${question.subtitle}</p>` : ''}
</div>
<div class="p-6 md:p-8">
<div class="space-y-3">
${question.options.map(opt => `
<button onclick="handleAnswer('${question.id}', ${opt.value}, ${opt.score})"
class="quiz-button w-full text-left p-5 rounded-xl border-2 transition-all duration-200"
style="border-color: rgb(229, 231, 235); background-color: white; color: #374151;"
onmouseenter="this.style.borderColor='#00AFAB'; this.style.backgroundColor='#f9fafb';"
onmouseleave="this.style.borderColor='rgb(229, 231, 235)'; this.style.backgroundColor='white';">
<div class="flex items-center justify-between">
<span class="text-lg font-medium">${opt.label}</span>
<span style="color: #9CA3AF;">→</span>
</div>
</button>
`).join('')}
</div>
</div>
</div>
<div class="mt-6 text-center text-sm text-gray-600">
<p>🔒 Vos réponses sont anonymes et utilisées uniquement pour le diagnostic</p>
</div>
</div>
</div>
`;
}
}
// Initial render
render();
</script>