EasyRSVP
ホーム

EasyRSVP招待状の埋め込み

招待状をウェブサイトに簡単に追加できます。

標準埋め込み

iframeを使用して任意のウェブページに招待状を追加できます。動的な高さ対応で自動リサイズされます。

埋め込みコード

<iframe data-easyrsvp-src="https://easyrsvp.net/embed/DAVETIYE_SLUG" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0" title="RSVP" scrolling="auto" loading="lazy"></iframe>
<script>var d=document,w="https://easyrsvp.net/widgets/embed.js",v=function(){"undefined"!=typeof EasyRSVP?EasyRSVP.loadEmbeds():d.querySelectorAll("iframe[data-easyrsvp-src]:not([src])").forEach((function(e){e.src=e.dataset.easyrsvpSrc}))};if("undefined"!=typeof EasyRSVP)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);}</script>

注意: INVITATION_SLUG の部分をご自身の招待状アドレスに置き換えてください。ダッシュボードの「埋め込みコード」から完成したコードをコピーできます。

パラメータ

URLに以下のパラメータを追加できます：

パラメータ説明
?dynamicHeight=1動的な高さを有効にします。iframeがコンテンツに合わせて自動的にリサイズされます。

使用例

動的な高さでの使用方法：

<iframe data-easyrsvp-src="https://easyrsvp.net/embed/DAVETIYE_SLUG?dynamicHeight=1"
  width="100%"
  height="800"
  frameborder="0"
  marginheight="0"
  marginwidth="0"
  title="RSVP"
  scrolling="auto"
  loading="lazy">
</iframe>
<script>var d=document,w="https://easyrsvp.net/widgets/embed.js",v=function(){"undefined"!=typeof EasyRSVP?EasyRSVP.loadEmbeds():d.querySelectorAll("iframe[data-easyrsvp-src]:not([src])").forEach((function(e){e.src=e.dataset.easyrsvpSrc}))};if("undefined"!=typeof EasyRSVP)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);}</script>

ベストプラクティス

  • レスポンシブな埋め込みのために動的な高さを有効にする
  • レスポンシブデザインにはwidth="100%"を使用する
  • 読み込み速度向上のためにloading="lazy"を追加する

ダッシュボードからの簡単な使い方

  1. 1ダッシュボードで招待状を選択
  2. 2「リンクを共有」ボタンをクリック
  3. 3「埋め込みコード」セクションからコードをコピー
  4. 4ウェブサイトに貼り付け