Embed

<div id="wb-quiz-widget" class="wb-quiz-container">
  
  
  <div id="wb-quiz-content">
    <div class="wb-quiz-header">
      <h2 class="wb-quiz-title">What's the #1 Reason Your Website Isn't Getting You Clients?</h2>
      <p class="wb-quiz-subtitle">Take this 2-minute quiz to find out</p>
    </div>
    
    <div class="wb-quiz-progress">
      <span id="wb-progress-text">Question 1 of 6</span>
      <div class="wb-quiz-progress-bar">
        <div id="wb-progress-fill" class="wb-quiz-progress-fill" style="width: 16.67%"></div>
      </div>
      <span id="wb-progress-percent">17%</span>
    </div>
    
    <div id="wb-question-container">
      <p id="wb-question" class="wb-quiz-question"></p>
      <div id="wb-options" class="wb-quiz-options"></div>
    </div>
    
    <div class="wb-quiz-nav">
      <button id="wb-back-btn" class="wb-quiz-btn wb-quiz-btn-back" disabled>← Back</button>
    </div>
  </div>
  
  
  <div id="wb-quiz-results" class="wb-quiz-results wb-hidden">
    <div class="wb-quiz-results-icon">🎯</div>
    <p class="wb-quiz-results-title">Your Diagnosis:</p>
    <h3 id="wb-result-type" class="wb-quiz-results-type"></h3>
    <p id="wb-result-description" class="wb-quiz-results-description"></p>
    <div class="wb-quiz-results-tips">
      <h4>Quick Fixes to Try:</h4>
      <ul id="wb-result-tips"></ul>
    </div>
    <a href="#" class="wb-quiz-cta">Request a Free Website Audit →</a>
    <button id="wb-restart-btn" class="wb-quiz-restart">Take the quiz again</button>
  </div>
  
</div>

<style>
/* Web Butler Quiz Widget Styles */
.wb-quiz-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  max-width: 600px;
  margin: 0 auto;
  padding: 30px;
  background: linear-gradient(135deg, #0a1628 0%, #1a2744 100%);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  color: #ffffff;
}

.wb-quiz-header {
  text-align: center;
  margin-bottom: 30px;
}

.wb-quiz-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.3;
  color: #ffffff;
}

.wb-quiz-subtitle {
  font-size: 1rem;
  color: #a0aec0;
  margin: 0;
}

.wb-quiz-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 0.875rem;
  color: #a0aec0;
}

.wb-quiz-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin: 0 15px;
  overflow: hidden;
}

.wb-quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #38b2ac, #4fd1c5);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.wb-quiz-question {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: #ffffff;
  line-height: 1.4;
}

.wb-quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wb-quiz-option {
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1rem;
  color: #e2e8f0;
  text-align: left;
}

.wb-quiz-option:hover {
  background: rgba(79, 209, 197, 0.15);
  border-color: #4fd1c5;
  transform: translateX(5px);
}

.wb-quiz-option.selected {
  background: rgba(79, 209, 197, 0.2);
  border-color: #4fd1c5;
}

.wb-quiz-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}

.wb-quiz-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.wb-quiz-btn-back {
  background: transparent;
  color: #a0aec0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.wb-quiz-btn-back:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.wb-quiz-btn-back:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Results Styles */
.wb-quiz-results {
  text-align: center;
}

.wb-quiz-results-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #38b2ac, #4fd1c5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.wb-quiz-results-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #4fd1c5;
}

.wb-quiz-results-type {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: #ffffff;
}

.wb-quiz-results-description {
  font-size: 1rem;
  color: #a0aec0;
  line-height: 1.6;
  margin-bottom: 25px;
}

.wb-quiz-results-tips {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 20px;
  text-align: left;
  margin-bottom: 25px;
}

.wb-quiz-results-tips h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #4fd1c5;
}

.wb-quiz-results-tips ul {
  margin: 0;
  padding-left: 20px;
  color: #e2e8f0;
}

.wb-quiz-results-tips li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.wb-quiz-cta {
  display: inline-block;
  padding: 14px 32px;
  background: linear-gradient(90deg, #38b2ac, #4fd1c5);
  color: #0a1628;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.wb-quiz-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(79, 209, 197, 0.3);
}

.wb-quiz-restart {
  display: block;
  margin-top: 15px;
  color: #a0aec0;
  font-size: 0.875rem;
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
}

.wb-quiz-restart:hover {
  color: #ffffff;
}

/* Hidden state */
.wb-hidden {
  display: none !important;
}

/* Responsive */
@media (max-width: 480px) {
  .wb-quiz-container {
    padding: 20px;
    border-radius: 12px;
  }
  
  .wb-quiz-title {
    font-size: 1.5rem;
  }
  
  .wb-quiz-question {
    font-size: 1.1rem;
  }
  
  .wb-quiz-option {
    padding: 14px 16px;
    font-size: 0.95rem;
  }
}
</style>

<script>
(function() {
  // Quiz Questions
  const questions = [
    {
      question: "When someone lands on your homepage, how quickly can they understand what you do?",
      options: [
        { text: "They'd probably need to read several paragraphs to figure it out", score: { mystery: 2 } },
        { text: "It's clear after reading my headline and a bit of text", score: { mystery: 1 } },
        { text: "They can tell within 5 seconds exactly who I help and how", score: {} }
      ]
    },
    {
      question: "What does a visitor see when they first land on your site?",
      options: [
        { text: "A generic stock photo or abstract image", score: { mystery: 1, trust: 1 } },
        { text: "A professional photo of me or custom photo with a clear headline", score: {} },
        { text: "Mostly text with no strong visual focal point", score: { deadend: 1 } }
      ]
    },
    {
      question: "How many different calls-to-action (buttons, links) are visible on your homepage?",
      options: [
        { text: "Just one main action I want visitors to take", score: {} },
        { text: "2-3 options depending on what they need", score: { deadend: 1 } },
        { text: "Several different options scattered around the page", score: { deadend: 2 } }
      ]
    },
    {
      question: "Do you have testimonials or social proof visible on your homepage?",
      options: [
        { text: "Yes, with photos and specific results", score: {} },
        { text: "Yes, but they're generic or text-only", score: { trust: 1 } },
        { text: "No testimonials on the homepage", score: { trust: 2 } }
      ]
    },
    {
      question: "What happens after someone reads your homepage?",
      options: [
        { text: "There's a clear next step (book a call, download something, etc.)", score: {} },
        { text: "They can contact me if they want to", score: { deadend: 1 } },
        { text: "I'm not sure what most visitors do next", score: { ghost: 2 } }
      ]
    },
    {
      question: "How often do you update your website content?",
      options: [
        { text: "Regularly - at least monthly", score: {} },
        { text: "Occasionally - a few times a year", score: { ghost: 1 } },
        { text: "Rarely - it's been months (or longer) since I touched it", score: { ghost: 2 } }
      ]
    }
  ];

  // Result Types
  const resultTypes = {
    mystery: {
      title: "The Mystery Box Website",
      description: "Your website isn't clearly communicating what you do and who you help. Visitors are leaving because they can't quickly understand if you're the right fit for them.",
      tips: [
        "Rewrite your headline to clearly state who you help and what problem you solve",
        "Add a professional photo of yourself above the fold",
        "Remove jargon and speak in your ideal client's language"
      ]
    },
    trust: {
      title: "The Trust Gap Website",
      description: "Your website lacks the social proof and credibility signals that help visitors feel confident about working with you. They're interested but not convinced.",
      tips: [
        "Add 2-3 testimonials with photos and specific results",
        "Include logos of companies you've worked with or been featured in",
        "Add a brief 'About' section that establishes your expertise"
      ]
    },
    deadend: {
      title: "The Dead End Website",
      description: "Your website doesn't guide visitors toward a clear next step. They're reading your content but then leaving without taking action.",
      tips: [
        "Add one clear, compelling call-to-action above the fold",
        "Remove competing buttons and links that distract from your main goal",
        "Offer a low-commitment first step (free resource, quick call)"
      ]
    },
    ghost: {
      title: "The Ghost Town Website",
      description: "Your website feels outdated or abandoned, which makes visitors question if you're still active or the right choice for them.",
      tips: [
        "Update your copyright year and any outdated information",
        "Add recent testimonials or case studies",
        "Consider adding a blog or news section to show activity"
      ]
    }
  };

  // State
  let currentQuestion = 0;
  let answers = [];
  let scores = { mystery: 0, trust: 0, deadend: 0, ghost: 0 };

  // DOM Elements
  const quizContent = document.getElementById('wb-quiz-content');
  const quizResults = document.getElementById('wb-quiz-results');
  const questionEl = document.getElementById('wb-question');
  const optionsEl = document.getElementById('wb-options');
  const progressText = document.getElementById('wb-progress-text');
  const progressFill = document.getElementById('wb-progress-fill');
  const progressPercent = document.getElementById('wb-progress-percent');
  const backBtn = document.getElementById('wb-back-btn');
  const resultType = document.getElementById('wb-result-type');
  const resultDescription = document.getElementById('wb-result-description');
  const resultTips = document.getElementById('wb-result-tips');
  const restartBtn = document.getElementById('wb-restart-btn');

  // Initialize
  function init() {
    renderQuestion();
    backBtn.addEventListener('click', goBack);
    restartBtn.addEventListener('click', restart);
  }

  // Render current question
  function renderQuestion() {
    const q = questions[currentQuestion];
    questionEl.textContent = q.question;
    
    // Update progress
    const progress = ((currentQuestion + 1) / questions.length) * 100;
    progressText.textContent = `Question ${currentQuestion + 1} of ${questions.length}`;
    progressFill.style.width = `${progress}%`;
    progressPercent.textContent = `${Math.round(progress)}%`;
    
    // Update back button
    backBtn.disabled = currentQuestion === 0;
    
    // Render options
    optionsEl.innerHTML = '';
    q.options.forEach((option, index) => {
      const btn = document.createElement('button');
      btn.className = 'wb-quiz-option';
      btn.textContent = option.text;
      if (answers[currentQuestion] === index) {
        btn.classList.add('selected');
      }
      btn.addEventListener('click', () => selectOption(index));
      optionsEl.appendChild(btn);
    });
  }

  // Handle option selection
  function selectOption(index) {
    answers[currentQuestion] = index;
    
    // Add scores
    const option = questions[currentQuestion].options[index];
    if (option.score) {
      Object.keys(option.score).forEach(key => {
        scores[key] = (scores[key] || 0) + option.score[key];
      });
    }
    
    // Next question or show results
    if (currentQuestion < questions.length - 1) {
      currentQuestion++;
      renderQuestion();
    } else {
      showResults();
    }
  }

  // Go back
  function goBack() {
    if (currentQuestion > 0) {
      // Remove scores from current answer
      if (answers[currentQuestion] !== undefined) {
        const option = questions[currentQuestion].options[answers[currentQuestion]];
        if (option.score) {
          Object.keys(option.score).forEach(key => {
            scores[key] = Math.max(0, (scores[key] || 0) - option.score[key]);
          });
        }
      }
      currentQuestion--;
      renderQuestion();
    }
  }

  // Show results
  function showResults() {
    // Find highest score
    let maxScore = 0;
    let maxType = 'mystery';
    Object.keys(scores).forEach(key => {
      if (scores[key] > maxScore) {
        maxScore = scores[key];
        maxType = key;
      }
    });
    
    // Build answer summary for email
    let answerSummary = '';
    questions.forEach((q, index) => {
      if (answers[index] !== undefined) {
        answerSummary += `Q${index + 1}: ${q.options[answers[index]].text}%0D%0A`;
      }
    });
    
    let resultTitle = '';
    
    // If all scores are 0, default to a positive message
    if (maxScore === 0) {
      resultTitle = "Your Website is in Good Shape!";
      resultType.textContent = resultTitle;
      resultDescription.textContent = "Based on your answers, your website has solid fundamentals. The next step is optimization and testing to maximize conversions.";
      resultTips.innerHTML = `
        <li>A/B test your headline to find the most compelling version</li>
        <li>Add more specific, results-focused testimonials</li>
        <li>Consider adding a lead magnet to capture visitor emails</li>
      `;
    } else {
      const result = resultTypes[maxType];
      resultTitle = result.title;
      resultType.textContent = resultTitle;
      resultDescription.textContent = result.description;
      resultTips.innerHTML = result.tips.map(tip => `<li>${tip}</li>`).join('');
    }
    
    // Update the CTA link with quiz data
    const ctaLink = document.querySelector('.wb-quiz-cta');
    const emailSubject = encodeURIComponent(`Website Audit Request - ${resultTitle}`);
    const emailBody = encodeURIComponent(`Hi,

I just took your website quiz and my result was: ${resultTitle}

My Answers:
Q1: ${questions[0].options[answers[0]].text}
Q2: ${questions[1].options[answers[1]].text}
Q3: ${questions[2].options[answers[2]].text}
Q4: ${questions[3].options[answers[3]].text}
Q5: ${questions[4].options[answers[4]].text}
Q6: ${questions[5].options[answers[5]].text}

I'd like to request a free website audit to discuss how you can help improve my website.

Thanks!`);
    
    ctaLink.href = `mailto:webbutler60@proton.me?subject=${emailSubject}&body=${emailBody}`;
    
    quizContent.classList.add('wb-hidden');
    quizResults.classList.remove('wb-hidden');
  }

  // Restart quiz
  function restart() {
    currentQuestion = 0;
    answers = [];
    scores = { mystery: 0, trust: 0, deadend: 0, ghost: 0 };
    quizResults.classList.add('wb-hidden');
    quizContent.classList.remove('wb-hidden');
    renderQuestion();
  }

  // Start
  init();
})();
</script>

Web Butler

Web Butler offers website support services to help business leaders and entrepreneurs build and maintain their online presence using AI tools such as Squarespace, Durable and Manus.