Skip to main content

Web Embed - Set up

Create your organization's integration, allow the websites that will show Yoodli, and copy the code that puts Yoodli practice, programs or recordings on your pages.

Written by Dewey Levi

Overview

Setup is a one-time integration for your organization, then one snippet for each thing you embed. A snippet is a short piece of HTML you copy from Yoodli and paste into your page.

  • You need to be an Org Owner or Org Admin. Web Embed isn't available on pay-as-you-go plans.

  • Step 1 and Step 2 create the integration and add your website to its Allow list. You do these once.

  • Step 3 and Step 4 copy a snippet and paste it into your page. Repeat them for each thing you embed.

  • For what each embed does, what learners see and troubleshooting, see Web Embed Integration.

What it looks like when it's done

Here is one organization using Web Embed, so you can see what the setup steps build.

The business case

  • Acme runs an onboarding portal for new sales reps at learn.acme.com.

  • Acme wants new reps to complete the "Sales Onboarding" program from inside the portal.

  • Acme also wants one pricing roleplay on a separate portal page, and wants the portal to record each rep's score.

In Yoodli

Org settings > Integrations > Web Embed

Setting

Value

Integration name

Acme portal

Allow list

learn.acme.com

Exit Button

On

Snippets copied

What's embedded

Where it was copied from

Sales Onboarding program

The program's Manage integration menu item

Pricing roleplay

The roleplay's Manage integration menu item, Web Embed tab

In the portal

  • Acme's web team pasted each snippet into its page, without changing it.

  • A rep opens the onboarding page, signs in to Yoodli inside the frame, and works through the program's steps.

  • When a rep finishes the pricing roleplay, the portal receives the score from Yoodli. When the rep clicks I'm Done, the portal learns the rep has finished.

Step 1: Create the Web Embed integration

  1. In Org settings, go to the Advanced Settings section. On the Integrations row, click Create new (or Manage, if your organization already has integrations).

    Org settings scrolled to Advanced Settings, with the Manage button on the Integrations row

  2. On the Integrations page, click Create an integration, open LMS integration, and click Web Embed.

    The Integrations page with Create an integration open on its LMS integration submenu, showing Web Embed

  3. Under Integration name, give it a name your admins will recognize.

    The new Web Embed integration page, with the empty Integration name field

Not sure whether you already have one? Each organization can have only one Web Embed integration. If Web Embed is turned off in that menu, your organization already has one; open it from the Integrations page instead.

Step 2: Add your website to the Allow list

  1. Under Allow list, type the domain of each page that will show Yoodli, such as learn.acme.com, and click the ✓ next to the field to add it.

    The Allow list section, with an empty domain field

  2. Type the domain only. Leave out https://, paths and port numbers.

  3. To cover every subdomain, add *.acme.com. If you also use the bare domain acme.com, add it as a separate entry.

  4. Click Save. Until you save, the integration is a draft. Programs don't show Manage integration, and a roleplay's Manage integration either doesn't appear or has no Web Embed tab.

Not sure what to enter? See What exactly do I put in the Allow list?

Step 3: Copy the snippet for what you want to embed

Where you copy a snippet depends on what you're embedding:

  • Dashboard, Library, all roleplays or Loops: on the Web Embed integration page, in Embed Dashboard, Embed Library, Embed All Roleplays or Embed Loops.

    The Web Embed integration page, zoomed out, with the Embed Dashboard, Embed Library, Embed All Roleplays and Embed Loops sections ringed

  • One roleplay: on the Roleplays page, open the roleplay's menu, click Manage integration, then open the Web Embed tab.

    A roleplay's menu on the Roleplays page, open on Manage integration

  • One program: the program must be Published. In Programs, open the program's menu, or the menu on the program's own page, and click Manage integration. A window opens titled Embed "<program name>" on your website.

    A Published program's menu in the Program library, open on Manage integration

  • One recording's summary: open the recording, open its more-options menu, and click Embed. The recording must belong to your organization.

    A recording's page with its more-options menu open on Embed

Then:

  1. Optional: set Size (optional). The default is 100% wide and 100% high. If you set it in pixels, use at least 375 wide and 800 high, or Copy stays turned off. Percentage sizes have no minimum.

  2. Optional, for one roleplay or one program: turn on Activity Launch Language and pick the practice language.

  3. Click Copy.

Not sure which one to embed? See Which embed should I use? in Web Embed Integration.

Step 4: Paste the snippet into your page

  1. Give the snippet to whoever edits your website, and have them paste it into the page as is.

  2. Make sure the page is served over HTTPS, at an address on your Allow list.

  3. Open the page and sign in, the way a learner would, to check that Yoodli appears.

Not sure what your web team needs to keep? See What must our web team keep in the snippet?

Setup FAQs

What exactly do I put in the Allow list?

The domain of the page that shows Yoodli, with nothing else.

  • learn.acme.com covers pages at https://learn.acme.com, on any path.

  • *.acme.com covers every subdomain, such as www.acme.com and a.b.acme.com, but not acme.com itself. Add acme.com separately if you need it.

  • acme.com doesn't cover www.acme.com.

  • You can add up to 10 entries. Pages on http:// addresses or on a port number can't be allowed.

What must our web team keep in the snippet?

Everything, especially the allow part of the snippet.

  • For roleplays, Loops and programs, the allow part lets learners use their camera and microphone inside the frame. Without it, they can't record.

  • If your page puts the frame in a sandbox, it must allow popups. Google, Microsoft and SSO sign-in, and program link steps, open a popup or new tab.

  • Some website builders need embedding turned on before they show a snippet, for example a WordPress plan that allows plugins. Check your website provider's documentation.

What does a snippet look like?

A single <iframe> tag. A program snippet looks like this:

<iframe src="https://app.yoodli.ai/api/web_embed/program?orgId=YOUR_ORG_ID&programId=YOUR_PROGRAM_ID" allow="camera *;microphone *; display-capture; clipboard-read; clipboard-write" width="100%" height="100%" style="min-width: 375px; min-height: 650px"></iframe>

Each snippet points to one thing to embed. Paste it where you want Yoodli to appear on your page.

Do I need to copy a new snippet after I change something?

Only to change its size or its Activity Launch Language. Those are written into the snippet when you copy it. Copy it again and replace the old one.

Renaming a program or roleplay doesn't affect its snippet. Otherwise, a snippet you've pasted keeps working unless one of these happens:

  • you delete the Web Embed integration;

  • you remove the page's domain from the Allow list;

  • a program is no longer Published, or is set to LMS-only;

  • a recording no longer belongs to your organization and isn't shared publicly.

To fix one, see The frame shows an error message instead of Yoodli or A learner sees "We couldn't find this program" in Web Embed Integration.

Did this answer your question?

Related Articles