Use Code View to Embed Content in Articles

Code view is a feature of article posts that gives you the flexibility to customize your content at the HTML level. Code view can be used to embed surveys, calendars, phone numbers, videos, and more, which makes for engaging content and helps your users access information without leaving the program.

This article contains and overview of how to use code view, and then some examples of content that can be embedded.

Steps to Use Code View

1. Start by creating a new Article, or edit an existing Article.
2. Click the < / > button to open code view.
3. Paste your embed code, or make other HTML edits.
4. Click the < / > button to close code view.
   • If you do not close code view, you will lose all changes and may have a blank post.
5. The editor will update to show what the embedded content looks like, and you can use preview to double check how the content appears to the member.
6. Complete other parts of your post - title, summary, text in the body, publish settings, etc. - when ready, save as a draft or publish.

Embed Survey

Use embedded surveys to collect feedback and opinions quickly and easily within your program - and you can send a deep linked 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>

Phone Links - Click to Call

Use phone links to easily add the contact information for your managers, directors, and more. Both Android and iOS devices recognize the tel: HTML link, and will open the linked phone number in the mobile device's phone app.

The basic format looks like this:

<a href="tel:+<country code>-<area code>-<phone#>"><displayed info></a>

While they are not required, we do recommend including a + symbol and the country code and using hyphens between numbers. This seems to provide the most consistent experience for members. You can format the displayed phone number in any way, including replacing it with text like "call now".

Example phone numbers which display text, standard US, and an Argentinian number:

<a href="tel:+1-888-674-1158">Call Now</a>

<a href="tel:+1-888-674-1158">+1 (888) 674-1158</a>

<a href="tel:+54-341-512-2188">+54 341 512 2188</a>

The code would look like the following:

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 which 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 into an article in 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 article:

Embed Video

You can embed video using code view. For more details on how to generate video embed code, please refer to the generate video embed code 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.

Additional questions about livestreaming? Contact Support for more information.

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 code view in an article.

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