Layer3 Journey Embedding Guide

Streamline the integration of Layer3 Journeys into your website or web application by following these easy steps.

Step 1 - Choose a Journey to Embed

Option A) Use an Existing Layer3 Journey

You can embed any public Journey from our collection. Browse available Journeys at on the Homepage, or on Community Pages.

Option B) Create a custom Journey

Tailor a Journey to align with your product and business goals. Two ways to proceed:

• Fast Track: Contact the Layer3 team. Eligible requests go live within 24 hours.
• Self-Serve: Use our Quest-Builder (Coming Soon).

Step 2 - Embedding the Journey

Embed your chosen or custom Journey using this code snippet:

<div class="layer3-journey layer3-card" data-journey-id="[journey_id]"></div><script src="https://layer3.xyz/embed.js"></script>

Replace [journey_id] with the Journey's URL slug. For example, for this Journey, usetransact-on-base.

The code snippet renders an interactive Card that opens the Journey when clicked and updates to reflect user progress.

📘

Note: For custom Journeys not publicly listed on Layer3, you'll receive a unique journey-id from the Layer3 team.

You may also opt for a custom UI element to trigger the Quest. Wrap the div around your element and omit the layer3-card class.

Step 3 - Customize the Journey Appearance (Coming Soon)

As of now, we only support the default Layer3 styling. Future updates will include:

1. Light Mode support
2. Custom brand accent colors

Happy embedding!