<!– Paste this into a Custom HTML block (no / / ) –>
https://cdn.tailwindcss.com
/* Local styles that don’t need */ .gradient-bg { background: linear-gradient(135deg, #836174 0%, #bfa29a 100%); }
.card-shadow { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04); }
.progress-bar { transition: width .3s ease; }
.fade-in { animation: fadeIn .5s ease-in; }
@keyframes fadeIn { from {opacity:0; transform: translateY(20px);} to {opacity:1; transform: translateY(0);} }
.result-card { background: linear-gradient(145deg, #f8fafc, #e2e8f0); border-left: 4px solid #836174; }
/* keep typography sane inside posts */
#ideal-client-app { box-sizing: border-box; font-family: Inter, -webkit-system, BlinkMacSystemFont, sans-serif; }
Ideal Client Identifier
Discover your perfect target audience with our strategic questionnaire. Get personalized insights on who to target, what content to create, and where to find them.
Start Discovery Process
Your Ideal Client Profile
Start New Analysis
Analyzing your responses…
(function(){
// config (kept inline, no external SDKs)
const defaultConfig = {
main_title: “Ideal Client Identifier”,
subtitle: “Discover your perfect target audience with our strategic questionnaire. Get personalized insights on who to target, what content to create, and where to find them.”,
cta_button: “Start Discovery Process”,
primary_color: “#836174”,
secondary_color: “#bfa29a”,
surface_color: “#FFFFFF”,
text_color: “#1f2937”,
accent_color: “#FFFFFF”,
font_family: “Inter”,
font_size: 16
};
let currentQuestionIndex = 0;
let responses = {};
const questions = [
{ id: ‘business_type’, question: ‘What type of business or service do you offer?’, type: ‘select’, options: [
‘E-commerce/Retail’,’Professional Services (Consulting, Legal, etc.)’,’Health & Wellness’,’Technology/Software’,
‘Education/Training’,’Creative Services (Design, Marketing, etc.)’,’Food & Beverage’,’Real Estate’,
‘Financial Services’,’Other’
]},
{ id: ‘target_age’, question: ‘What age group do you primarily want to reach?’, type: ‘select’, options: [
‘Gen Z (18-27)’,’Millennials (28-43)’,’Gen X (44-59)’,’Baby Boomers (60+)’,’Mixed age groups’
]},
{ id: ‘income_level’, question: ‘What income level best describes your ideal clients?’, type: ‘select’, options: [
‘Budget-conscious ($25k-$50k)’,’Middle income ($50k-$100k)’,’Upper middle class ($100k-$200k)’,’High income ($200k+)’,’Mixed income levels’
]},
{ id: ‘pain_points’, question: ‘What are the main problems or challenges your ideal clients face?’, type: ‘textarea’,
placeholder: ‘Describe the specific pain points your audience experiences that your business can solve…’ },
{ id: ‘goals’, question: ‘What goals or outcomes do your ideal clients want to achieve?’, type: ‘textarea’,
placeholder: ‘Describe what success looks like for your clients…’ },
{ id: ‘current_marketing’, question: ‘Where do you currently try to reach your audience?’, type: ‘select’, options: [
‘Social media (Instagram, Facebook, etc.)’,’Google Ads/SEO’,’Email marketing’,’Networking events’,
‘Referrals only’,’Traditional advertising’,’Not currently marketing’,’Multiple channels’
]},
{ id: ‘budget’, question: “What’s your monthly marketing budget range?”, type: ‘select’, options: [
‘Under $500′,’$500 – $2,000′,’$2,000 – $5,000′,’$5,000 – $10,000′,’Over $10,000′,’No set budget yet’
]}
];
// render question
function renderQuestion(i){
const q = questions[i];
const container = document.getElementById(‘question-container’);
let inputHtml = ”;
if (q.type === ‘select’) {
inputHtml = `
Select an option…
${q.options.map(opt => `${opt}`).join(”)}
`;
} else {
inputHtml = `
${responses[q.id] || ”}`;
}
container.innerHTML = `
${q.question}
${inputHtml}
`;
const pct = ((i+1)/questions.length)*100;
document.getElementById(‘progress-bar’).style.width = pct + ‘%’;
document.getElementById(‘progress-text’).textContent = (i+1) + ‘ of ‘ + questions.length;
const prevBtn = document.getElementById(‘prev-btn’);
const nextBtn = document.getElementById(‘next-btn’);
prevBtn.classList.toggle(‘hidden’, i===0);
nextBtn.textContent = (i === questions.length-1) ? ‘Get My Results’ : ‘Next Question’;
}
function generateResults(){
const businessType = responses.business_type;
const ageGroup = responses.target_age;
const incomeLevel = responses.income_level;
const painPoints = responses.pain_points;
const goals = responses.goals;
const currentMarketing = responses.current_marketing;
const budget = responses.budget;
const platformRecommendations = {
‘Gen Z (18-27)’: [‘TikTok’,’Instagram’,’YouTube Shorts’,’Discord’],
‘Millennials (28-43)’: [‘Instagram’,’Facebook’,’LinkedIn’,’YouTube’],
‘Gen X (44-59)’: [‘Facebook’,’LinkedIn’,’Email’,’Google Ads’],
‘Baby Boomers (60+)’: [‘Facebook’,’Email’,’Traditional media’,’Google’],
‘Mixed age groups’: [‘Facebook’,’Instagram’,’Email’,’Google Ads’]
};
const contentPillars = {
‘E-commerce/Retail’: [‘Product showcases’,’Customer testimonials’,’Behind-the-scenes’,’Styling tips’],
‘Professional Services (Consulting, Legal, etc.)’: [‘Industry insights’,’Case studies’,’Educational content’,’Thought leadership’],
‘Health & Wellness’: [‘Tips & advice’,’Success stories’,’Educational content’,’Community building’],
‘Technology/Software’: [‘Product demos’,’Tutorials’,’Industry news’,’Customer success stories’],
‘Education/Training’: [‘Educational content’,’Student success stories’,’Industry insights’,’Free resources’],
‘Creative Services (Design, Marketing, etc.)’: [‘Portfolio showcases’,’Process insights’,’Industry trends’,’Client testimonials’],
‘Food & Beverage’: [‘Recipe content’,’Behind-the-scenes’,’Customer features’,’Seasonal content’],
‘Real Estate’: [‘Market insights’,’Property showcases’,’Client testimonials’,’Local community content’],
‘Financial Services’: [‘Educational content’,’Market updates’,’Success stories’,’Tips & advice’],
‘Other’: [‘Educational content’,’Behind-the-scenes’,’Customer stories’,’Industry insights’]
};
const platforms = platformRecommendations[ageGroup] || [‘Facebook’,’Instagram’,’Email’];
const pillars = contentPillars[businessType] || [‘Educational content’,’Customer stories’,’Behind-the-scenes’,’Industry insights’];
return `
🎯 Your Target Audience Profile
Demographics:
${ageGroup || ”}, ${incomeLevel || ”}
Business Type:
${businessType || ”}
💡 Content Pillars Strategy
Based on your business type, focus on these content themes:
${pillars.map(p => `
${p}
`).join(”)}
📱 Recommended Platforms
Your ${ageGroup || ”} audience is most active on:
${platforms.map(pl => `${pl}`).join(”)}
🎯 Key Messaging Focus
Address these pain points:
${(painPoints||”).replace(/</g,'<')}
Help them achieve:
${(goals||”).replace(/</g,'<')}
💰 Budget Optimization
With your ${budget || ”} budget, prioritize organic content on your top 2 platforms and consider paid promotion for your best-performing posts.
`;
}
function showToast(msg){
const t = document.createElement(‘div’);
t.className = ‘fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50’;
t.textContent = msg;
document.body.appendChild(t);
setTimeout(()=>t.remove(), 3000);
}
function handleNext(){
const input = document.getElementById(‘answer-input’);
const q = questions[currentQuestionIndex];
if (!input || !input.value.trim()) { showToast(‘Please provide an answer before continuing’); return; }
responses[q.id] = input.value.trim();
if (currentQuestionIndex === questions.length – 1) {
// show loading and render results
document.getElementById(‘question-form’).classList.add(‘hidden’);
document.getElementById(‘loading-screen’).classList.remove(‘hidden’);
setTimeout(()=>{
document.getElementById(‘loading-screen’).classList.add(‘hidden’);
document.getElementById(‘results-screen’).classList.remove(‘hidden’);
document.getElementById(‘results-content’).innerHTML = generateResults();
}, 800);
} else {
currentQuestionIndex++;
renderQuestion(currentQuestionIndex);
}
}
function handlePrevious(){
if (currentQuestionIndex > 0) {
currentQuestionIndex–;
renderQuestion(currentQuestionIndex);
}
}
function resetForm(){
currentQuestionIndex = 0;
responses = {};
document.getElementById(‘results-screen’).classList.add(‘hidden’);
document.getElementById(‘welcome-screen’).classList.remove(‘hidden’);
}
// init
document.addEventListener(‘DOMContentLoaded’, function(){
// apply brand colours to background in case Tailwind loads slowly
// already handled by gradient-bg class
// wire events
const startBtn = document.getElementById(‘start-btn’);
const nextBtn = document.getElementById(‘next-btn’);
const prevBtn = document.getElementById(‘prev-btn’);
const restartBtn = document.getElementById(‘restart-btn’);
startBtn && startBtn.addEventListener(‘click’, function(){
document.getElementById(‘welcome-screen’).classList.add(‘hidden’);
document.getElementById(‘question-form’).classList.remove(‘hidden’);
renderQuestion(0);
});
nextBtn && nextBtn.addEventListener(‘click’, handleNext);
prevBtn && prevBtn.addEventListener(‘click’, handlePrevious);
restartBtn && restartBtn.addEventListener(‘click’, resetForm);
// allow Enter to advance (but not in textarea)
document.addEventListener(‘keypress’, (e)=>{
const qForm = document.getElementById(‘question-form’);
if (e.key === ‘Enter’ && qForm && !qForm.classList.contains(‘hidden’)) {
const input = document.getElementById(‘answer-input’);
if (input && input.tagName !== ‘TEXTAREA’) handleNext();
}
});
});
})();
Virtual Roots Agency 