embed code

Basic embed

The minimum required code to embed the YAP widget:

<iframe
  src="https://widget.yaphub.xyz/token/CONTRACT_ADDRESS"
  width="380"
  height="600"
  frameborder="0"
></iframe>

---

Recommended embed (with security attributes)

<!-- YAP Anonymous Chat Widget -->
<!-- Docs: docs.yaphub.xyz -->
<iframe
  src="https://widget.yaphub.xyz/token/CONTRACT_ADDRESS"
  sandbox="allow-scripts allow-same-origin allow-popups"
  referrerpolicy="no-referrer"
  width="380"
  height="600"
  frameborder="0"
></iframe>

Sandbox attributes explained

Attribute	Purpose
allow-scripts	Allows JavaScript to run inside the widget
allow-same-origin	Allows the widget to use localStorage for anonymous identity
allow-popups	Allows external links (Helio payment, Axiom, etc.) to open

The following are intentionally not included:

Omitted	Why
allow-top-navigation	Widget cannot navigate your page
allow-forms	No form submissions to external services
allow-same-origin without scripts	Meaningless without scripts

---

With custom colours

<iframe
  src="https://widget.yaphub.xyz/token/CONTRACT_ADDRESS?bg=%230a0a0a&bg2=%23111111&text=%23ffffff&accent2=%23e0e0e0&border=%232a2a2a"
  sandbox="allow-scripts allow-same-origin allow-popups"
  referrerpolicy="no-referrer"
  width="380"
  height="600"
  frameborder="0"
></iframe>

See URL Parameters for all available colour options.

---

Responsive sizing

To make the widget fill its container responsively:

<div style="width: 100%; max-width: 420px; height: 700px;">
  <iframe
    src="https://widget.yaphub.xyz/token/CONTRACT_ADDRESS"
    sandbox="allow-scripts allow-same-origin allow-popups"
    referrerpolicy="no-referrer"
    width="100%"
    height="100%"
    frameborder="0"
    style="border-radius: 10px;"
  ></iframe>
</div>

---

React / JSX

function YAPWidget({ contractAddress }) {
  return (
    <iframe
      src={`https://widget.yaphub.xyz/token/${contractAddress}`}
      sandbox="allow-scripts allow-same-origin allow-popups"
      referrerPolicy="no-referrer"
      width={380}
      height={600}
      frameBorder={0}
      style={{ borderRadius: 10 }}
      title="YAP Community Chat"
    />
  );
}

---

Vue

<template>
  <iframe
    :src="`https://widget.yaphub.xyz/token/${contractAddress}`"
    sandbox="allow-scripts allow-same-origin allow-popups"
    referrerpolicy="no-referrer"
    :width="380"
    :height="600"
    frameborder="0"
  />
</template>

<script setup>
defineProps({ contractAddress: String })
</script>