iFrames give you the flexibility to customize your content at the HTML level. iFrames can be used to embed surveys, calendars, videos, and more, which makes for engaging content and helps your users access information without leaving the community.

Refer to this article for an overview on how to create an iFrame block and then review examples below of content that can be embedded using an iFrame block.

Embed Survey

Use embedded surveys to collect feedback and opinions quickly and easily within your community - and you can send a push notification to pull members into the survey(s).

We recommend using the following iFrame to embed the survey, all you need to update is the <URL> between quotation marks after src=

<iframe allowfullscreen="" frameborder="0" height="500px" src="<URL>" width="100%"></iframe>

Depending on your survey tool, the URL that you want to grab may be called the "Share Link", "Web Link", or "Embed URL". We don't recommend using full website embed code, but rather grab the share link (or web link) and embed using the iFrame sample above.

One of our favorite tools for embedded surveys is Typeform, which works seamlessly across web and mobile. Another great survey tool that your users are probably familiar with is SurveyMonkey.

Known Issue: If using SurveyMonkey, you may see excessive white space at the top of your survey on iOS devices. This can be resolved via a configuration change in SurveyMonkey. In SurveyMonkey, navigate to the Design Survey screen, expand "Options" in the bar on the right to see a toggle for "One Question at a Time," and disable the toggle.

Embed Calendar

Embed a calendar to give your members quick access to a calendar of events for conferences, company happy hours, off-sites, and more.

To embed a calendar, you'll need a calendar embed code. Google Calendar offers embed codes so we recommend creating a calendar with your events using that side. Follow Google's instructions for adding a google calendar to your website to grab the HTML. The embed code should look something like the following:

<iframe src="https://calendar.google.com/calendar/embed?src=onfirstup.com_c4l3nd4r1d%40group.calendar.google.com&amp;ctz=America%2FLos_Angeles" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Embed Map

Embed maps to easily share the locations of customer events, conferences, company happy hours and off-sites, and more.

The key is to find a map service with an embed code that uses <iframe>. Google Maps is easy to use and compatible with most devices, so our example here is from Google Maps.

Steps to Get Google Map Embed Code

1. Open https://www.google.com/maps in a browser and search for your location.
2. Click the Share icon under the map details.
3. Switch from Share Link to Embed Map
4. Choose the map size that you want.
5. Copy the embed code and paste it into an iFrame block in Creator Studio.

The Google Map embed code should look something like this:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.7242004602567!2d-122.4804437846811!3d37.81992857975128!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808586deffffffc3%3A0xcded139783705509!2sGolden+Gate+Bridge!5e0!3m2!1sen!2sus!4v1513301664881" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>

The above embed code looks like this in the campaign:

Embed Video

You can embed video using an iFrame block. For more details on how to generate video embed code, please refer to the how to embed a video article.

Livestream Video

Livestreaming is the process of broadcasting real-time, live video footage or video feed to an audience accessing the video stream over the internet. The viewing device can be a desktop computer, laptop, tablet, smartphone or digital screen.

The next time your company offers a livestream of your Sales Kickoff Event, a conference, or other large announcement, add the video stream into your app! You'll reach your audience live and your users will be able to access your video footage directly in your app.

When you livestream a video, you'll receive a link or code to embed the video into another site. Once you have your embed code, you'll embed the video using the same process as other videos. Use the following iframe to embed the survey, all you need to update is the <URL> between quotation marks after src=

<iframe allowfullscreen="" frameborder="0" height="500px" src="<URL>" width="100%"></iframe>

Note: Make sure your URL includes https:// and not http://.

There are many livestream services, the following have worked with the Firstup mobile app:

Livestream

• Monthly cost, pricing based on features needed
• Embeddable
• Ability to make a livestream unlisted and/or password protected

Ustream

• Monthly cost, based on user viewing
• Embeddable
• Ability to password protect a channel/livestream

Youtube

• Free
• Embeddable
• Like other YouTube videos, can be set to 'Unlisted'

We have also seen customers use Zoom or Teams with advanced livestream features. If you use something like Streamyard, the actual event needs to be fed somewhere like YouTube, Facebook, or LinkedIn.

Facebook Live can be watched via the web experience but is not available to mobile app users. Facebook Live is not playable on any mobile app outside of the Facebook mobile app itself (i.e. you can't watch them in mobile safari or embedded into another app). So, if a stream is embedded into a card, it's not possible to watch it within our mobile app due to limitations set by Facebook.

Podcast, MP3 Audio Files

Podcast and other audio files are just like videos or surveys, you just need to find the "share link" and use the iframe embed code to embed via an iFrame block.

Alternatively, if you can convert the audio to an MP4 (video file) it can be uploaded as a video campaign (choose video block when creating a new campaign). Using video editing software, add your audio file (MP3), add an image, and then export the file as an MP4.