Layer3 Quest Embedding Guide

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

Step 1: Choose a Quest to Embed

Option A: Use an Existing Layer3 Quest

Layer3 boasts a rich library of educational crypto content. You can embed any public Quest from our collection. Browse available quests at Layer3 Quest Library.

Option B: Create a Custom Quest

Tailor a Quest 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).

📘

Example: See how WOOFi embedded a custom Quest to incentivize users to Bridge into Base, rewarding them with a limited edition NFT. WOOFi Custom Quest

Layer3 handles:

• Fluid, interactive Quest user experience.
• Verification of completed steps (e.g., Bridging to Base via contracts in WOOFi’s case).
• On-chain reward distribution.

Step 2: Embed the Quest

Embed your chosen or custom Quest using this code snippet:

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

Replace [quest_id] with the Quest's URL slug. For example, for this Quest, use introduction-to-zkevm.

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

📘

Note: For custom Quests not publicly listed on Layer3, you'll receive a unique quest-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 Quest 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!