Embedding ViewMedica into a Duda Website

This tutorial will introduce you to embedding ViewMedica into a DUDA website.

Once you have logged in and navigated to the page you want to edit, following these steps to add the ViewMedica player.

  1. Add a new row to the page.

  2. Click the widgets panel on the left menu bar. Select the "HTML" widget.

  3. Paste the ViewMedica embed code into the editor. Click "Update" to save your changes.

  4. Publish your page. Your video will load on the domain associated with your ViewMedica account.

Track ViewMedica Events With Google Analytics

You can track of number of events associated with individual ViewMedica content using your Google Analytics account.

Enable Tracking

  1. Make sure you have a Google Analytics account and have the analytics tracking code installed in your HTML page that displays the ViewMedica viewer. See Google's site for Google Analytics support.

  2. Enable Tracking Analytics in the ViewMedica system by selecting "Enabled" on Google Analytics in your On-Demand Settings. You can find a link to On-Demand Settings in your Dashboard area after logging into your account on the ViewMedica website.

Finding the ViewMedica On-Demand events in your Google Analytics

  1. Log into your Google Analytics account.

  2. Click the "Behavior" section.

  3. Click the "Events" subsection.

  4. Click the "Overview" page.

  5. Click the "ViewMedica On-Demand" category.

  6. Select "Event Label" as the Primary Dimension.

    Here you can see the various ViewMedica videos that your users have interacted with. By clicking the ViewMedica video title, you can see the following events that occured:

    • Video Loaded
    • Video Started
    • Step Reached | { Step }
    • Video End

How to Embed ViewMedica on Patient Pop

Are you unable to run third-party scripts on your site? Do you not have an easy method for sandboxing third-party iframes?

Here's a solution to get the main ViewMedica embed on your site:

  1. Login to ViewMedica.com

  2. Go to Launch Player


  3. Inspect the ViewMedica player using the developer tools in your browser and copy the iframe


  4. Paste the iframe in the source editor for your site

  5. ViewMedica looks best at a 16:9 aspect ratio with a thin gray border - style accordingly

    <style>
      .vm-wrapper {
        border: solid 1px lightgray;
        height: 0;
        overflow: hidden;
        padding-bottom: 56.25%;
        position: relative;
        width: 100%;
      }
      .vm-wrapper iframe {
        border: none;
        height: 100%;
        left: 0;
        width: 100%;
        position: absolute;
        top: 0;
      }
    </style>
    
    <div class="vm-wrapper">
        YOUR IFRAME HERE
    </div>
    

Note

If you find yourself coming to this support article often, consider reaching out so we can help develop a custom solution together. We realize there are security concerns that may inhibit the use of third-party scripts, but we want to help streamline the use of ViewMedica on your site. Besides being inconvenient, this method partially breaks functionality of the ViewMedica player.

How to Integrate Facebook Sharing Tags with ViewMedica

You can add Facebook OpenGraph sharing tags to your web page to improve the information used when a ViewMedica video is shared. By default, ViewMedica will only share a link to the page its embedded on. However, after adding a few OpenGraph tags, it will share a title, description and thumbnail as well.

Copy the ViewMedica Title
Copy the ViewMedica Description
Copy the ViewMedica Thumbnail

First, gather the required information from the Installation Page of your ViewMedica account. We'll need the video's title, description, and thumbnail URL. Now, use this information to build the appropriate tags in the of your web page. You could also use a WordPress plugin to help manage the tags on your page.

Here is a sample webpage with the recommended OpenGraph tags:



After you place these tags, you should use the Facebook Sharing Debugger to pre-cache your content and ensure that your tags are working correctly. This will mean that the next time a user shares a link to your website, Facebook already has the required assets. You can find more information about sharing best practices on the Facebook website.


Check that your OpenGraph tags are working using the Facebook Sharing Debugger