Whova - embed - PRIORITY

[mrchristian]

FORCE11 are using an event scheduling service called Whova for their annual conference and FSCI summer school. https://whova.com/

This is the event content schedule posted on the Whova website - for the FORCE11 conference https://whova.com/embedded/event/gbajO9ObcxdWGqSi7b1opr07LC45vMLeriEB-ZCjbis%3D/?utc_source=ems

I want to be able to embed the Whova page content in a page on the FORCE11 website.

On this page - https://force11.org/conference/post/force2024-schedule/

This is a priority as the conference is happening soon.

Below is the code that was sharing for embedding. But when I paste in via Gutenberg the Javascript doesnt run.

I emailed Whova support and they say the Javascript can run if its pasted in using the old style Wordpress editor. I dont know how to use the old editor on the site. When I looked at running Javascript from Gutenberg I couldnt figure it out.

I cant find a support area on Whova website. They appear to be missing any clear support material - eh hem!

Can we get this to work easily - or do Whova need to provide their data in a better way. I would wonder even if you did get it to embed would links work as they would not be loading into new tabs.

<div>
        <div title=“Whova event and conference app” id=“whova-agendawidget”>
            <p id=“whova-loading”>Loading...</p>
        </div>
        <script src=“https://whova.com/static/frontend/xems/js/embed/embedagenda.js?eid=gbajO9ObcxdWGqSi7b1opr07LC45vMLeriEB-ZCjbis%3D&host=https://whova.com” type=“text/javascript”  id=“embeded-agenda-script”>
        </script>
        <div id=“whova-wrap” class=“whova-wrap-class”>
            Powered By
            <a class=“brandlink” target=“_blank” href=“https://whova.com/”>
                <b>Whova</b>
            </a>
            <br/>
            <a class=“whova-emslink brandanchorlink” target=“_blank” href=“https://whova.com/whova-event-app/”>
                Conference Meeting Apps
            </a>
        </div>
    </div>

This is a link to the schedule directly on Whoova:

https://whova.com/embedded/event/gbajO9ObcxdWGqSi7b1opr07LC45vMLeriEB-ZCjbis%3D/?utc_source=ems

[mrchristian]

From Whova support:

Whova Support (Whova) Jun 6, 2024, 08:13 PDT

Thank you for reaching out!

Our embed code and plugins will not work on Wordpress.com sites. They are only supported on self-hosted Wordpress sites.

1. Go to Posts and select the page you want to add the agenda to.
2. Click the "Text" tab.
3. Paste your agenda webpage code into the text area.
4. Click "Update" to publish to your WordPress site.

Please let us know if you have any questions!

[mrchristian]

Here is a staging site you can work on: https://staging2.force11.org/ you will need offweb un/pw

[djavco]

Corrected code:

<div title="Whova event and conference app" id="whova-agendawidget">
            <p id="whova-loading">Loading...</p>
          </div>
          <script
            src="https://whova.com/static/frontend/xems/js/embed/embedagenda.js?eid=gbajO9ObcxdWGqSi7b1opr07LC45vMLeriEB-ZCjbis%3D&host=https://whova.com"
            type="text/javascript"
            id="embeded-agenda-script"
          />
          <div id="whova-wrap" className="whova-wrap-class">
            Powered By
            <a class="brandlink" target="_blank" href="https://whova.com/">
              <b>Whova</b>
            </a>
            <br />
            <a
              class="whova-emslink brandanchorlink"
              target="_blank"
              href="https://whova.com/whova-event-app/">
              Conference Meeting Apps
            </a>
          </div>

[djavco]

Looks like the script tag needs to be self closing to work:

<script
            src="https://whova.com/static/frontend/xems/js/embed/embedagenda.js?eid=gbajO9ObcxdWGqSi7b1opr07LC45vMLeriEB-ZCjbis%3D&host=https://whova.com"
            type="text/javascript"
            id="embeded-agenda-script"
          />

[djavco]

This was also fixed by editing with Elementor and choosing the html code and adding the embed code.

[mrchristian]

Works now. We'll have to see in the future if it can be repeated. https://force11.org/conference/post/force2024-schedule/

Currently I'm not sure where the initial code comes from. I'll find out.

[TAC-NISO]

The initial code came from the event management tool. Specifically, the agenda code is generated by this page: General-Purpose Agenda Webpage: [https://whova.com/xems/view/embed_agenda/fsci_202407/]

There is an export of on the Conference-only schedule, although one could also output the entire FSCI/FORCE agenda, since the two events are combined in Whoova.

Todd