$all {
Boho Landing Pagebody {
box-sizing: border-box;
}
.font-elegant {
font-family: 'Lato', sans-serif;
}
.font-script {
font-family: 'Dancing Script', cursive;
}
const defaultConfig = {
background_color: "#F5F1E8",
surface_color: "#FFFFFF",
text_color: "#2C3E50",
primary_action: "#5FA99A",
secondary_action: "#E89B8E",
font_family: "Lato",
font_size: 16,
hero_title: "Find Your Balance",
hero_subtitle: "Transformative wellness experiences for your studio community",
about_title: "Welcome to Serenity",
about_text: "We bring holistic wellness programming directly to your studio, creating memorable experiences that nurture body, mind, and spirit.",
why_title: "Why Studios Love It",
benefit_1: "Turnkey wellness events that delight your community",
benefit_2: "Professional facilitation with authentic care",
benefit_3: "Flexible packages that fit your studio's vision",
how_title: "How It Works",
step_1: "Book a discovery call to explore possibilities",
step_2: "We customize the perfect experience for your space",
step_3: "Relax as we handle all the details",
cta_title: "Ready to Elevate Your Studio?",
cta_button: "Let's Connect",
contact_email: "hello@yourstudio.com",
contact_phone: "(555) 123-4567"
};
function createLeafIcon(color) {
return `
`;
}
function createWaveIcon(color) {
return `
`;
}
function createSpineIcon(color) {
return `
`;
}
async function onConfigChange(config) {
const app = document.getElementById('app');
const baseFontSize = config.font_size || defaultConfig.font_size;
const customFont = config.font_family || defaultConfig.font_family;
const fontStack = `${customFont}, Lato, sans-serif`;
const backgroundColor = config.background_color || defaultConfig.background_color;
const surfaceColor = config.surface_color || defaultConfig.surface_color;
const textColor = config.text_color || defaultConfig.text_color;
const primaryAction = config.primary_action || defaultConfig.primary_action;
const secondaryAction = config.secondary_action || defaultConfig.secondary_action;
app.style.backgroundColor = backgroundColor;
app.style.color = textColor;
app.style.fontFamily = fontStack;
app.innerHTML = `
${createLeafIcon(primaryAction)}
${createWaveIcon(secondaryAction)}
${config.hero_title || defaultConfig.hero_title}
${config.hero_subtitle || defaultConfig.hero_subtitle}
Explore Our Services
${createLeafIcon(primaryAction)}
${config.about_title || defaultConfig.about_title}
${config.about_text || defaultConfig.about_text}
${config.why_title || defaultConfig.why_title}
${createLeafIcon(primaryAction)}
${config.benefit_1 || defaultConfig.benefit_1}
${createWaveIcon(secondaryAction)}
${config.benefit_2 || defaultConfig.benefit_2}
${createSpineIcon(primaryAction)}
${config.benefit_3 || defaultConfig.benefit_3}
${config.how_title || defaultConfig.how_title}
${config.step_1 || defaultConfig.step_1}
${config.step_2 || defaultConfig.step_2}
${config.step_3 || defaultConfig.step_3}
${config.cta_title || defaultConfig.cta_title}
${config.cta_button || defaultConfig.cta_button}
📧 ${config.contact_email || defaultConfig.contact_email}
📱 ${config.contact_phone || defaultConfig.contact_phone}
${createLeafIcon(primaryAction)}
${createWaveIcon(secondaryAction)}
© 2024 Your Studio. All rights reserved.
`;
}
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.surface_color || defaultConfig.surface_color,
set: (value) => {
config.surface_color = value;
window.elementSdk.setConfig({ surface_color: value });
}
},
{
get: () => config.text_color || defaultConfig.text_color,
set: (value) => {
config.text_color = value;
window.elementSdk.setConfig({ text_color: value });
}
},
{
get: () => config.primary_action || defaultConfig.primary_action,
set: (value) => {
config.primary_action = value;
window.elementSdk.setConfig({ primary_action: value });
}
},
{
get: () => config.secondary_action || defaultConfig.secondary_action,
set: (value) => {
config.secondary_action = value;
window.elementSdk.setConfig({ secondary_action: 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],
["about_title", config.about_title || defaultConfig.about_title],
["about_text", config.about_text || defaultConfig.about_text],
["why_title", config.why_title || defaultConfig.why_title],
["benefit_1", config.benefit_1 || defaultConfig.benefit_1],
["benefit_2", config.benefit_2 || defaultConfig.benefit_2],
["benefit_3", config.benefit_3 || defaultConfig.benefit_3],
["how_title", config.how_title || defaultConfig.how_title],
["step_1", config.step_1 || defaultConfig.step_1],
["step_2", config.step_2 || defaultConfig.step_2],
["step_3", config.step_3 || defaultConfig.step_3],
["cta_title", config.cta_title || defaultConfig.cta_title],
["cta_button", config.cta_button || defaultConfig.cta_button],
["contact_email", config.contact_email || defaultConfig.contact_email],
["contact_phone", config.contact_phone || defaultConfig.contact_phone]
]);
}
if (window.elementSdk) {
window.elementSdk.init({
defaultConfig,
onConfigChange,
mapToCapabilities,
mapToEditPanelValues
});
}
}