Delivery rules for predictable, production-ready weblayers.
Use this guide to keep setup, component composition, and export behavior aligned across campaign and technical teams.
Use this sequence on every campaign.
-
1. Choose campaign mode
Pick personalized or non-personalized mode based on targeting logic and data context.
-
2. Configure global settings
Define container behavior, spacing, trigger settings, typography, and tracking details first.
-
3. Build layout structure
Create rows and columns before adding rich content so placement stays stable on all breakpoints.
-
4. Edit selected components
Adjust content, styles, and actions component-by-component after base structure is complete.
-
5. Validate generated code
Use code view to validate HTML, CSS, JavaScript, and Bloomreach JSON separately before export handoff.
-
6. Export and handoff
Export ZIP and pass to implementation with mode, assumptions, and QA notes documented.
Map each code tab to the right deployment artifact.
-
HTML tab
Use as the rendered markup payload.
-
CSS tab
Use as campaign styling payload.
-
JavaScript tab
Use for runtime behavior and event handling only.
-
Bloomreach JSON tab
Provide this as
window.BLOOMREACH_WEBLAYER_CONFIG(or JSON string equivalent) before running JavaScript.