Integrating Twine for Attendee Networking in Virtual Events

Twine is a great little tool to add some creative networking options to your PheedLoop event. PheedLoop allows you to integrate with Twine in a way that reduces the steps required for attendees to participate in a Twine event, meaning they click on a single button and through a single-sign-on experience, your PheedLoop attendees are automatically authenticated into Twine. There are essentially two common uses-cases for Twine users in PheedLoop. The first is a general networking space for the whole event, and the second is an individual networking space for each session at the event. We describe how you may consider implementing both scenarios in PheedLoop. Of course, you're welcome to combine both and you're also welcome to customize the code described below to meet your own needs.

Note: These steps only work for virtual events in PheedLoop. This integration is not meant to service on-site events, at least in the same capacity as virtual.

Event-Wide Networking

This approach will place the Twine room in your virtual event's sidebar.

Step 1 - Get the custom code into your virtual event

Copy the following code into the "Custom Code" field under Experiences > Virtual > Settings. Do not save it just yet, you need to replace the "base_url" variable with the actual URL which you'll retrieve in Step 2.

<script>
   var base_url = "https://appweb.twine.nyc/embed/rooms/1234?uid_h=xyz123"; // Replace the URL within quotes with your own room's embed URL
   $("#sidebar").append(`<div data-fancybox data-type="iframe" data-src="${base_url}&firstname=${attendee_local_first_name}&lastname=${attendee_local_last_name}&email=${attendee_local_email}&autofill=true" class="virtual-action d-block"><span class="icon-container"><i class="fas fa-people-arrows"></i></span><span class="ml-2 mt-2">Breakout Room</span></div>`);
</script>

Step 2 - Copy the base URL for your Twine room

Login to Twine, visit your event, and select the room you would like to embed into PheedLoop. Click on the embed button for the room (looks like <>) and copy the URL within the "src" tag (minus the quotations). In the code you pasted in Step 1, replace the "base_url" (first line of code) placeholder URL with the URL you just copied from Twine. Ensure you maintain the quotes for the custom code.

Step 3 - Save and test

Save the custom code, and visit your virtual event portal. From the menu on the lefthand side, you will see a new option called "Breakout Room". Click on that, and your Twine room will launch. You should find that the room auto-populates with the relevant attendee information.

Session-Specific Networking

This approach will place a Twine room in any session's custom engage section, right next to the stream.

Step 1 - Get the custom code into your session

Login to Twine, visit your event, and select the room you would like to embed into PheedLoop. Click on the embed button for the room (looks like <>) and copy the entire block of code. Paste this code into the "Custom Engage Code" field of any session you are looking to add a Twine room to. This field is found within a session's Virtual Settings section. Do not save the session just yet.

Step 2 - Customize the code to allow for authentication

Within the session editor in PheedLoop where you've copied the code from Step 1 into, you must now make a few small changes to the code itself. The final result should look like this:

<iframe id="twine-iframe" sandbox="allow-scripts allow-same-origin allow-top-navigation allow-forms allow-popups allow-pointer-lock allow-popups-to-escape-sandbox" allow="camera;microphone" width="100" height="100"></iframe><br>

<script><br>   const twine_src = "https://appweb.twine.nyc/embed/rooms/2165?uid_h=96805f642c0ba0b65663c86b48d4e459";
   document.getElementById("twine-iframe").src = `${twine_src}&firstname=${attendee_local_first_name}&lastname=${attendee_local_last_name}&email=${attendee_local_email}&autofill=true`;
</script>

The key changes you must make note of from the original code you copy from Twine are:

The "src" tag was removed from the copied code, and the URL was copied to the constant in the script tags called "twine_src"
Add the "id" tag with the value "twine-iframe" to the copied code, which will be used to identify the iframe to allow for dynamically injecting the "src" as shown in the script below the iframe

Step 3 - Save and test

Save your changes in the session in PheedLoop, and navigate over to your virtual event portal. Visit the session and assuming the stream is enabled (can be toggled on via your session editor in the dashboard or via the backstage in the virtual event portal) you should see a new tab in the session called "Engage". Click on this tab, and you should see your Twine room load. You should be able to participate seamlessly in your Twine session via this interface. You may also consider using the code from the Event-Wide Networking method described first in this article by placing buttons in the session's description area. We do not provide this code or guidance for this, however, the code is entirely customizable and you are welcome to experiment with it in any way you prefer.

Questions?

If you have any questions at all, the best team to reach out to first is the Twine team. PheedLoop only renders the interface within the platform but does not have the specific information about the functionality of Twine or any questions/concerns you may have. We are more than happy to assist, but recommend reaching out to Twine first.