`).join('');
}
function toggleFAQ(index) {
faqOpenStates[index] = !faqOpenStates[index];
renderFAQs();
}
async function onConfigChange(config) {
const heroTitle = document.getElementById('hero-title');
const heroSubtitle = document.getElementById('hero-subtitle');
const ctaHeadline = document.getElementById('cta-headline');
if (heroTitle) heroTitle.textContent = config.hero_title || defaultConfig.hero_title;
if (heroSubtitle) heroSubtitle.textContent = config.hero_subtitle || defaultConfig.hero_subtitle;
if (ctaHeadline) ctaHeadline.textContent = config.cta_headline || defaultConfig.cta_headline;
// Apply colors
document.body.style.backgroundColor = config.background_color || defaultConfig.background_color;
// Apply font
const fontFamily = config.font_family || defaultConfig.font_family;
document.body.style.fontFamily = `${fontFamily}, sans-serif`;
}
function mapToCapabilities(config) {
return {
recolorables: [
{
get: () => config.background_color || defaultConfig.background_color,
set: (value) => { config.background_color = value; window.elementSdk.setConfig({ background_color: value }); }
},
{
get: () => config.heading_color || defaultConfig.heading_color,
set: (value) => { config.heading_color = value; window.elementSdk.setConfig({ heading_color: value }); }
},
{
get: () => config.text_color || defaultConfig.text_color,
set: (value) => { config.text_color = value; window.elementSdk.setConfig({ text_color: value }); }
},
{
get: () => config.button_color || defaultConfig.button_color,
set: (value) => { config.button_color = value; window.elementSdk.setConfig({ button_color: value }); }
},
{
get: () => config.divider_color || defaultConfig.divider_color,
set: (value) => { config.divider_color = value; window.elementSdk.setConfig({ divider_color: value }); }
}
],
borderables: [],
fontEditable: {
get: () => config.font_family || defaultConfig.font_family,
set: (value) => { config.font_family = value; window.elementSdk.setConfig({ font_family: value }); }
},
fontSizeable: {
get: () => config.font_size || defaultConfig.font_size,
set: (value) => { config.font_size = value; window.elementSdk.setConfig({ font_size: value }); }
}
};
}
function mapToEditPanelValues(config) {
return new Map([
['hero_title', config.hero_title || defaultConfig.hero_title],
['hero_subtitle', config.hero_subtitle || defaultConfig.hero_subtitle],
['cta_headline', config.cta_headline || defaultConfig.cta_headline]
]);
}
// Initialize FAQs
renderFAQs();
// Initialize SDK
if (window.elementSdk) {
window.elementSdk.init({
defaultConfig,
onConfigChange,
mapToCapabilities,
mapToEditPanelValues
});
}