Multiple embeddings not working

[AUT-TOM]

I've just tried to implement two event inline embeddings for two different Event types on a site, which did not work.

When doing this one Event is displaying a never ending loading animation and the other embedding is not loading at all.

Tried it in several browsers => same error One embdding was always working, two are always generating said problem.

I had to take it offline and port back to calendly because of that bug, so no link for an example.

Please take a look into why you can't do two embeddings on a site.

thanks in advance

[PeerRich]

i think we fixed this in the past @hariombalhara no?

[hariombalhara]

This is actually a documentation problem. I have already opened an issue #10031 to update code snippet generator to generate namespace supported code.

[hariombalhara]

This is how you have more than 1 embed on a page. See working sandbox https://codesandbox.io/embed/2-embed-on-single-page-9h97th?file=/src/index.js&codemirror=1

[AUT-TOM]

Is there a certain timeline when this (namespace fix) will be merged into the public code?

I think having multiple event types & multiple embeddings on one site is nothing particular uncommon

[AUT-TOM]

@hariombalhara @PeerRich Shall I just use the "Cal inline embed code" from the Sandbox example or could this break with future releases?

[hariombalhara]

@AUT-TOM No, it won't break. I am going to fix the Code Snippet generator to generate similar code.

[AUT-TOM]

@hariombalhara

I just tried to use the productive inline code embedding generator and still do have the same problem, just as a reminder that this is still not fixed

[AUT-TOM]

Just tested the code from your Sandbox:

It loads both embeddings, but it somehow ignores my setup with tabs on my wordpress site with the enfold theme calendly works

like that, so I still can't use cal.com as a drop-in replacement :(

Sadly I can't grant access to the testing site, just can give you a code snipped and screenshots to explain the problem which is working not like the calendly embedding:

 <div id='av-tab-section-2'  class='av-tab-section-container entry-content-wrapper main_color av-tab-no-transition   av-tab-above-content  avia-builder-el-45  el_after_av_tab_section  el_before_av_tab_section  tab-section-not-first container_wrap fullsize'  ><div class='av-tab-section-outer-container av-70si2v-c09e66423375f0d177f55f899b5c5732'><div class='av-tab-section-tab-title-container avia-tab-title-padding-default' role='tablist'><a href='#ninja-einzeltrainings' data-av-tab-section-title='1' class='av-section-tab-title av-active-tab-title no-scroll av-29sbv3r-dfe30ba6a997f6d33883ab271c6dd0aa av-tab-no-icon av-tab-no-image ' role='tab' tabindex='0' aria-controls='av-tab-section-2-1'><span class='av-outer-tab-title'><span class='av-inner-tab-title'>Ninja Einzeltrainings</span></span><span class="av-tab-arrow-container"><span></span></span></a><a href='#parkour-einzeltrainings' data-av-tab-section-title='2' class='av-section-tab-title  av-1ytar87-5915bce6322a1e5861193aa8a481cd73 av-tab-no-icon av-tab-no-image ' role='tab' tabindex='0' aria-controls='av-tab-section-2-2'><span class='av-outer-tab-title'><span class='av-inner-tab-title'>Parkour Einzeltrainings</span></span><span class="av-tab-arrow-container"><span></span></span></a></div><div class='avia-slideshow-arrows av-tabsection-arrow' ><a href='#prev' class='prev-slide av_prev_tab_section av-tab-section-slide' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'  tabindex='-1'>Zurück</a><a href='#next' class='next-slide av_next_tab_section av-tab-section-slide' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'  tabindex='-1'>Weiter</a></div><div class='av-tab-section-inner-container avia-section-default' style='width:200vw; left:0%;'><span class="av_prev_tab_section av_tab_navigation"></span><span class="av_next_tab_section av_tab_navigation"></span>
<div id='av-tab-section-2-1' class='av-layout-tab av-kv3dj-91693d83b7772801c0efe29b6f07e618 av-animation-delay-container  avia-builder-el-46  el_before_av_tab_sub_section  avia-builder-el-first  av-active-tab-content __av_init_open ' data-av-deeplink-tabs="" data-av-tab-section-content="1" data-tab-section-id="ninja-einzeltrainings"><div class="av-layout-tab-inner"><div class="container">
<section class="avia_codeblock_section  avia_code_block_0"  itemscope="itemscope" itemtype="https://schema.org/CreativeWork" ><div class='avia_codeblock '  itemprop="text" ><div
      style="width: 100%; height: 100%; overflow: scroll;"
      id="my-cal-inline"
    ></div>
    <script type="text/javascript">
      (function (C, A, L) {
        let p = function (a, ar) {
          a.q.push(ar);
        };
        let d = C.document;
        C.Cal =
          C.Cal ||
          function () {
            let cal = C.Cal;
            let ar = arguments;
            if (!cal.loaded) {
              cal.ns = {};
              cal.q = cal.q || [];
              d.head.appendChild(d.createElement("script")).src = A;
              cal.loaded = true;
            }
            if (ar[0] === L) {
              const api = function () {
                p(api, arguments);
              };
              const namespace = ar[1];
              api.q = api.q || [];
              typeof namespace === "string"
                ? (cal.ns[namespace] = api) && p(api, ar)
                : p(cal, ar);
              return;
            }
            p(cal, ar);
          };
      })(window, "https://app.cal.com/embed/embed.js", "init");
      Cal("init", { origin: "https://app.cal.com" });

      Cal("inline", {
        elementOrSelector: "#my-cal-inline",
        calLink: "pkaustria/ninja-warrior-einzeltraining",
        layout: "month_view"
      });

      Cal("ui", {
        styles: { branding: { brandColor: "#000000" } },
        hideEventTypeDetails: false,
        layout: "month_view"
      });
    </script>
    <!-- Cal inline embed code ends --></div></section>
</div></div></div><div id='av-tab-section-2-2' class='av-layout-tab av-4ljut3-9a3e0e335367f92c6d97a6afe5f16d2c av-animation-delay-container  avia-builder-el-48  el_after_av_tab_sub_section  avia-builder-el-last  ' data-av-deeplink-tabs="" data-av-tab-section-content="2" data-tab-section-id="parkour-einzeltrainings"><div class="av-layout-tab-inner"><div class="container">
<section class="avia_codeblock_section  avia_code_block_1"  itemscope="itemscope" itemtype="https://schema.org/CreativeWork" ><div class='avia_codeblock '  itemprop="text" ><!-- Cal inline embed code Namespace ricknamespace begins -->
    <div
      style="width: 100%; height: 100%; overflow: scroll;"
      id="my-cal-inline"
    ></div>
<script type="text/javascript">
      (function (C, A, L) {
        let p = function (a, ar) {
          a.q.push(ar);
        };
        let d = C.document;
        C.Cal =
          C.Cal ||
          function () {
            let cal = C.Cal;
            let ar = arguments;
            if (!cal.loaded) {
              cal.ns = {};
              cal.q = cal.q || [];
              d.head.appendChild(d.createElement("script")).src = A;
              cal.loaded = true;
            }
            if (ar[0] === L) {
              const api = function () {
                p(api, arguments);
              };
              const namespace = ar[1];
              api.q = api.q || [];
              typeof namespace === "string"
                ? (cal.ns[namespace] = api) && p(api, ar)
                : p(cal, ar);
              return;
            }
            p(cal, ar);
          };
      })(window, "https://app.cal.com/embed/embed.js", "init");
      Cal("init", "mySecond", { origin: "https://app.cal.com" });

      Cal.ns.mySecond("inline", {
        elementOrSelector: "#my-cal-inline",
        calLink: "pkaustria/parkour-einzeltraining",
        layout: "month_view"
      });

      Cal.ns.mySecond("ui", {
![2023-08-29 08_02_15-Home (Enfold 2017 by TOM) - Parkour-Austria TEST — Mozilla Firefox](https://github.com/calcom/cal.com/assets/127188675/248d5f6d-94d4-4f6e-ae51-f170c6b9ca43)
![2023-08-29 08_02_59-Home (Enfold 2017 by TOM) - Parkour-Austria TEST — Mozilla Firefox](https://github.com/calcom/cal.com/assets/127188675/078d532b-fade-40f4-966e-e0ffb9201623)

        styles: { branding: { brandColor: "#000000" } },
        hideEventTypeDetails: false,
        layout: "month_view"
      });
    </script>
    <!-- Cal inline embed code ends --></div></section>

[hariombalhara]

@AUT-TOM Is it possible for you to get on a call and debug the problem there?

[hariombalhara]

@AUT-TOM Here is a working glitch example where I used almost the same code that you shared. Fixed some issues with it. Main reason for it to be not working was that you were targeting(using elementOrSelector) the same element for both the embeds. I changed "my-cal-inline" to "my-cal-inline-1" and "id="my-cal-inline-2" and it started working. https://glitch.com/edit/#!/important-nickel-mustard

https://important-nickel-mustard.glitch.me/

I am closing this issue now. Let me know if you are still facing issues.

[AUT-TOM]

@hariombalhara

Right now your glitch site isn't working for me and when doing your suggested change (adding "-1" & "-2" or without), same for me

https://app.cal.com/embed/embed.js => 404 not found

[hariombalhara]

That 404 was different issue with embed that just got fixed. Could you try again

[AUT-TOM]

works now for me now, thanks

[medlJeremy]

@hariombalhara I am experiencing this or a similar issue. Has the namespace prop been added to the embed-react library? I am using version 1.3.0 and I don't see a newer release but namespace doesn't seem to be available

[Pedro-Picardi]

@hariombalhara i'm trying to place 5 or more embeds in one sigle page and this example you gave in codesandbox.io apparently does not work for more than 2 embeds in a page. I've already tried to place different elementOrSelector for each embed, also different namespaces for each embed (e.g "mySecond", "myThird", "my"Fourth", and so on...) and ONLY opens 2 embeds... Why?