Gauche
Droite
41/60
82/160
Prévisualisation
Testez l'impact réel de vos optimisations
Déployez vos tests A/B en quelques clics et suivez les recommandations de notre IA
VotreMarqueJe veux en savoir plus
Code Embed
À coller dans un Rich Text Webflow
<style>
.cta-_R_avb_ {
display: flex;
width: 100%;
max-width: none;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
margin: 32px 0;
box-sizing: border-box;
}
.cta-_R_avb_ * {
box-sizing: border-box;
}
.cta-_R_avb_ .cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
background: #2cff8b;
color: #151223;
padding: 14px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 15px;
transition: all 0.2s ease;
border: none;
cursor: pointer;
white-space: nowrap;
}
.cta-_R_avb_ .cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px #2cff8b4D;
}
.cta-_R_avb_ .cta-button .icon {
width: 36px;
height: 36px;
background: white;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cta-_R_avb_ .cta-button .icon svg {
width: 18px;
height: 18px;
}
.cta-_R_avb_ .cta-content {
background: #151223;
padding: 40px;
flex: 2;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
}
.cta-_R_avb_ .cta-content h3 {
color: #ffffff;
font-size: 24px;
font-weight: 700;
line-height: 1.3;
margin: 0;
}
.cta-_R_avb_ .cta-content p {
color: rgba(255,255,255,0.75);
font-size: 15px;
line-height: 1.5;
margin: 0;
}
.cta-_R_avb_ .cta-action {
background: #ffffff;
padding: 40px;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}
.cta-_R_avb_ .cta-action .label {
color: #151223;
font-size: 32px;
font-weight: 700;
letter-spacing: -0.5px;
}
.cta-_R_avb_ .cta-action .logo {
object-fit: contain;
}
@media (max-width: 700px) {
.cta-_R_avb_ {
flex-direction: column;
}
.cta-_R_avb_ .cta-content,
.cta-_R_avb_ .cta-action {
padding: 30px;
}
}
</style>
<div class="cta-_R_avb_">
<div class="cta-content">
<h3>Testez l'impact réel de vos optimisations</h3>
<p>Déployez vos tests A/B en quelques clics et suivez les recommandations de notre IA</p>
</div>
<div class="cta-action">
<span class="label">VotreMarque</span>
<a href="#" class="cta-button"><span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="#151223" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg></span>Je veux en savoir plus</a>
</div>
</div>Code Footer
À coller dans le Custom Code du template
<script>
(function() {
// Configuration du CTA
const ctaConfig = {
backgroundMode: "bicolor",
bgColorLeft: "#151223",
bgColorRight: "#ffffff",
gradientDirection: "to-right",
buttonColor: "#2cff8b",
buttonTextColor: "#151223",
title: "Testez l'impact réel de vos optimisations",
titleColor: "#ffffff",
description: "Déployez vos tests A/B en quelques clics et suivez les recommandations de notre IA",
descriptionColor: "rgba(255,255,255,0.75)",
label: "VotreMarque",
labelColor: "#151223",
buttonText: "Je veux en savoir plus",
buttonUrl: "",
showIcon: true,
labelMode: "text",
logoUrl: "",
logoHeight: 40,
iconSvg: `<line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline>`,
fontTitle: null,
fontBody: null
};
// Génération d'un ID unique
const uniqueId = 'cta-' + Math.random().toString(36).substr(2, 9);
function getGradientAngle(direction) {
const angles = {
'to-right': '90deg',
'to-left': '270deg',
'to-top': '0deg',
'to-bottom': '180deg',
'to-top-right': '45deg',
'to-top-left': '315deg',
'to-bottom-right': '135deg',
'to-bottom-left': '225deg'
};
return angles[direction] || '90deg';
}
function getBackgroundStyle(config) {
if (config.backgroundMode === 'solid') return config.bgColorLeft;
if (config.backgroundMode === 'gradient') {
const angle = getGradientAngle(config.gradientDirection);
return `linear-gradient(${angle}, ${config.bgColorLeft} 0%, ${config.bgColorRight} 100%)`;
}
return config.bgColorLeft;
}
function getIconSvg(config) {
return `<svg viewBox="0 0 24 24" fill="none" stroke="${config.buttonTextColor}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">${config.iconSvg}</svg>`;
}
function getBaseStyles(uniqueId, config) {
const iconStyles = config.showIcon ? `
.${uniqueId} .cta-button .icon {
width: 36px;
height: 36px;
background: white;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.${uniqueId} .cta-button .icon svg {
width: 18px;
height: 18px;
}
` : '';
const buttonFontFamily = config.fontBody ? `font-family: "${config.fontBody}", sans-serif;` : '';
return `
.${uniqueId} * { box-sizing: border-box; }
.${uniqueId} .cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
background: ${config.buttonColor};
color: ${config.buttonTextColor};
padding: 14px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 15px;
transition: all 0.2s ease;
border: none;
cursor: pointer;
white-space: nowrap;
${buttonFontFamily}
}
.${uniqueId} .cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px ${config.buttonColor}4D;
}
${iconStyles}
`;
}
function getStandardStyles(uniqueId, config, inverted) {
const useUnifiedBg = config.backgroundMode !== 'bicolor';
const containerBg = useUnifiedBg ? `background: ${getBackgroundStyle(config)};` : '';
const contentBg = useUnifiedBg ? '' : `background: ${config.bgColorLeft};`;
const actionBg = useUnifiedBg ? '' : `background: ${config.bgColorRight};`;
const titleFontFamily = config.fontTitle ? `font-family: "${config.fontTitle}", sans-serif;` : '';
const bodyFontFamily = config.fontBody ? `font-family: "${config.fontBody}", sans-serif;` : '';
return `
.${uniqueId} {
display: flex;
${inverted ? 'flex-direction: row-reverse;' : ''}
width: 100%;
max-width: none;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
margin: 32px 0;
box-sizing: border-box;
${containerBg}
}
${getBaseStyles(uniqueId, config)}
.${uniqueId} .cta-content {
${contentBg}
padding: 40px;
flex: 2;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
}
.${uniqueId} .cta-content h3 {
color: ${config.titleColor};
font-size: 24px;
font-weight: 700;
line-height: 1.3;
margin: 0;
${titleFontFamily}
}
.${uniqueId} .cta-content p {
color: ${config.descriptionColor};
font-size: 15px;
line-height: 1.5;
margin: 0;
${bodyFontFamily}
}
.${uniqueId} .cta-action {
${actionBg}
padding: 40px;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}
.${uniqueId} .cta-action .label {
color: ${config.labelColor};
font-size: 32px;
font-weight: 700;
letter-spacing: -0.5px;
${titleFontFamily}
}
.${uniqueId} .cta-action .logo {
object-fit: contain;
}
@media (max-width: 700px) {
.${uniqueId} { flex-direction: column; }
.${uniqueId} .cta-content, .${uniqueId} .cta-action { padding: 30px; }
}
`;
}
function getCenteredStyles(uniqueId, config) {
const titleFontFamily = config.fontTitle ? `font-family: "${config.fontTitle}", sans-serif;` : '';
const bodyFontFamily = config.fontBody ? `font-family: "${config.fontBody}", sans-serif;` : '';
return `
.${uniqueId} {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
max-width: none;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
margin: 32px 0;
padding: 40px;
gap: 16px;
box-sizing: border-box;
background: ${getBackgroundStyle(config)};
}
${getBaseStyles(uniqueId, config)}
.${uniqueId} .label {
color: ${config.labelColor};
font-size: 28px;
font-weight: 700;
letter-spacing: -0.5px;
${titleFontFamily}
}
.${uniqueId} h3 {
color: ${config.titleColor};
font-size: 24px;
font-weight: 700;
line-height: 1.3;
margin: 0;
max-width: 600px;
${titleFontFamily}
}
.${uniqueId} p {
color: ${config.descriptionColor};
font-size: 15px;
line-height: 1.5;
margin: 0;
max-width: 500px;
${bodyFontFamily}
}
.${uniqueId} .cta-button { margin-top: 8px; }
.${uniqueId} .logo { object-fit: contain; }
@media (max-width: 700px) {
.${uniqueId} { padding: 30px; }
}
`;
}
function getButtonHtml(config) {
const iconHtml = config.showIcon
? `<span class="icon">${getIconSvg(config)}</span>`
: '';
return `<a href="${config.buttonUrl || '#'}" class="cta-button">${iconHtml}${config.buttonText}</a>`;
}
function getLabelHtml(config) {
if (config.labelMode === 'none') return '';
if (config.labelMode === 'logo' && config.logoUrl) {
return `<img src="${config.logoUrl}" alt="Logo" class="logo" style="height: ${config.logoHeight}px; width: auto;" />`;
}
return `<span class="label">${config.label}</span>`;
}
function getStandardHtml(uniqueId, config) {
const labelHtml = getLabelHtml(config);
return `
<div class="${uniqueId}">
<div class="cta-content">
<h3>${config.title}</h3>
<p>${config.description}</p>
</div>
<div class="cta-action">
${labelHtml}
${getButtonHtml(config)}
</div>
</div>
`;
}
function getCenteredHtml(uniqueId, config) {
const labelHtml = getLabelHtml(config);
return `
<div class="${uniqueId}">
${labelHtml}
<h3>${config.title}</h3>
<p>${config.description}</p>
${getButtonHtml(config)}
</div>
`;
}
// Génération des styles et HTML selon le template
const template = "standard";
const styles = template === "centered"
? getCenteredStyles(uniqueId, ctaConfig)
: getStandardStyles(uniqueId, ctaConfig, false);
const ctaHtml = template === "centered"
? getCenteredHtml(uniqueId, ctaConfig)
: getStandardHtml(uniqueId, ctaConfig);
const styleSheet = document.createElement('style');
styleSheet.textContent = styles;
document.head.appendChild(styleSheet);
// Insertion du CTA à la fin du contenu de l'article
const articleContent = document.querySelector('.w-richtext') || document.querySelector('article') || document.querySelector('main');
if (articleContent) {
const ctaContainer = document.createElement('div');
ctaContainer.innerHTML = ctaHtml;
articleContent.appendChild(ctaContainer.firstElementChild);
}
})();
</script>