همه‌ی یکپارچه‌سازی‌ها

سایت‌ها و فروشگاه‌ها · افزودن ویجت رزرو به سایت

هماهنگ برای وب‌فلو

وب‌فلو برای کد سفارشی المان Embed دارد. ویجت هماهنگ را در آن بگذارید تا فرم رزرو جای خودش را در چیدمان شما پیدا کند.

چه چیزی به دست می‌آورید

  • با طراحی شما جور است

    ویجت عرض المان والد را پر می‌کند؛ پس از گرید شما پیروی می‌کند.

  • ارتفاع با محتوا تنظیم می‌شود

    وقتی مهمان مراحل را طی می‌کند، قاب ارتفاعش را اعلام می‌کند.

  • بدون ارتقای پلن برای افزونه

    المان Embed بخشی از وب‌فلو است و چیز دیگری برای خرید لازم نیست.

  • صفحه‌های مختلف، خدمات مختلف

    هر صفحه می‌تواند به نوع رویداد متفاوتی اشاره کند.

نحوه‌ی اتصال Webflow

  1. کلید Embed را بگیرید

    در هماهنگ به سازمان › Embed بروید و کلید Embed را کپی کنید.

  2. Embed را برای نوع رویداد فعال کنید

    نوع رویداد را باز کنید، به بخش امکانات اضافه‌ی رزرو بروید و «اجازه‌ی جاسازی در سایت‌های خارجی» را روشن کنید. نوع رویدادی که این تنظیم را ندارد، ویجت خالی نشان می‌دهد.

  3. دامنه‌تان را اضافه کنید

    در هماهنگ به سازمان › Embed بروید و با «افزودن وب‌سایت» دامنه‌ی اصلی را وارد کنید. دامنه‌ی آزمایشی روی webflow.io باید جداگانه اضافه شود.

  4. یک المان Embed اضافه کنید

    در Webflow Designer المان Embed را روی صفحه بکشید و پنجره‌ی کد را باز کنید.

  5. کد را بگذارید و ویرایش کنید

    کد زیر را بگذارید و YOUR_EMBED_KEY و YOUR_EVENT_TYPE_SLUG را جایگزین کنید.

  6. منتشر و آزمایش کنید

    سایت را منتشر کنید و روی دامنه‌ی اصلی یک رزرو آزمایشی بگیرید.

المان Embed وب‌فلو

<div id="retime-booking" style="max-width:900px;margin:0 auto"></div>
<script>
  (function () {
    var mount = document.getElementById('retime-booking');
    if (!mount) return;

    var origin = 'https://www.hamahang.app';
    var key = 'YOUR_EMBED_KEY';
    var slug = 'YOUR_EVENT_TYPE_SLUG';

    var frame = document.createElement('iframe');
    frame.src =
      origin + '/embed/' + encodeURIComponent(key) + '/' + encodeURIComponent(slug);
    frame.title = 'Book a time';
    frame.loading = 'lazy';
    frame.allow = 'clipboard-write';
    frame.style.width = '100%';
    frame.style.border = '0';
    frame.style.display = 'block';
    frame.style.minHeight = '600px';

    window.addEventListener('message', function (event) {
      if (event.origin !== origin) return;
      if (event.source !== frame.contentWindow) return;

      var data = event.data;
      if (data && data.type === 'retime:resize' && typeof data.height === 'number') {
        frame.style.height = Math.max(200, Math.min(data.height, 4000)) + 'px';
      }
    });

    mount.appendChild(frame);
  })();
</script>

بوم Designer اسکریپت را اجرا نمی‌کند. سایت را منتشر کنید و روی دامنه‌ی اصلی آزمایش کنید.

سؤال‌های رایج درباره‌ی Webflow

چرا Designer یک کادر خالی نشان می‌دهد؟

وب‌فلو اسکریپت‌های جاسازی‌شده را روی بوم اجرا نمی‌کند. ویجت در سایت منتشرشده نمایش داده می‌شود.

دامنه‌ی آزمایشی را هم باید به فهرست اضافه کنم؟

بله، اگر می‌خواهید آنجا آزمایش کنید. آدرس webflow.io دامنه‌ای جدا از دامنه‌ی خود شماست.

می‌توانم عرض را تنظیم کنم؟

بله. المان Embed را داخل یک div بگذارید و عرض را روی آن div تنظیم کنید. ویجت فضایی را که به آن داده شود پر می‌کند.

همین حالا از Webflow استفاده کنید

یک حساب رایگان بسازید، تقویمتان را وصل کنید و همین امروز اولین لینک رزروتان را به اشتراک بگذارید.

شروع رایگان