Overview

Web Embed lets you place parts of Yoodli on your own web pages, inside a frame. You copy a short piece of HTML, called a snippet, from Yoodli and paste it into your page.

Each organization has one Web Embed integration. An Org Owner or Org Admin sets it up once, on the Integrations page, which opens from the Integrations row of Org settings.
The integration's Allow list names the websites that may show Yoodli. Yoodli only appears on pages at those addresses, over HTTPS.
You can embed seven things: the Dashboard, the recordings Library, all roleplays, one roleplay, Loops, one program, or one recording's summary.
Learners sign in to Yoodli inside the frame. The only exception is the summary of a recording shared publicly.
Embedding doesn't give anyone access. Learners still need to be members of your organization, and in the right groups, the same as in the Yoodli app.

What it looks like when it's done

Here is one organization using Web Embed, so you can see what the steps in Set Up the Web Embed Integration 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.

Setting it up

See Set Up the Web Embed Integration to create the initial integration, and for instructions to copy the snippet for each additional embed.

Choosing what to embed

Use these to pick the embed that fits what your page is for.

Which embed should I use?

Embed practice (all roleplays, one roleplay or Loops), a program to work through, or a view of results (the Dashboard, the Library or one recording's summary), depending on what the learner should do on your page.

Dashboard: see their own progress and insights. There's no embed for team dashboards.
Library: see their own recordings and recordings shared with them.
All roleplays: choose any roleplay and practice it. Your page can receive the scores.
One roleplay: practice one specific roleplay. Your page can receive the score, and learn when the learner is done.
Loops: practice their assigned loops.
One program: work through a program's steps in order.
One recording's summary: view a recording's results. No sign-in if the recording is shared publicly.

Can our website receive scores or know when a learner is done?

Yes. Both roleplay embeds (one roleplay or all roleplays) send scores, and a one-roleplay embed can also tell your page when the learner is done. Yoodli sends your page a message for each scored session, with the score, the roleplay, the recording link, the session length, the completion time and the learner's email.

With Exit Button on, a one-roleplay embed also tells your page when the learner clicks I'm Done. See What does the Exit Button setting do?
Programs, Loops, the Dashboard, the Library and recording summaries send your page no messages. Progress is tracked in Yoodli.
Your developers listen for browser message events and should check that each one comes from Yoodli. Each message has a messageType: score_complete for a score, and activity_done when the learner clicks I'm Done. For the full message format, see the Web Embed API documentation.

What does the Exit Button setting do?

It shows learners an I'm Done button after they practice in a roleplay embed.

In a one-roleplay embed, clicking it tells your page the learner has finished, then the frame goes blank.
In an all-roleplays embed, the frame goes blank and your page gets no message.
It has no effect on the Dashboard, Library, Loops, program or recording summary embeds.

Can I embed a program that isn't Published yet?

No. A program must be Published before you can copy its snippet. If a program is set back to Draft or archived later, learners who open the embed see "We couldn't find this program".

Can I preview a program in an embed before learners see it?

Yes. Publish it, and assign it only to a group that has no one else in it. A program must be Published to copy its snippet, and only people in its groups can see it in an embed. Assign it to your learners' groups when you're ready.

Can I put more than one embed on a page?

Yes. Paste each snippet separately, where you want each one to appear. Give each frame enough room: at least 375 pixels wide.

Do I need a separate setup for phones?

No. There's no separate setup for phones. Use percentage sizes, like the default 100%, so the frame fits your page's layout. Each frame is at least 375 pixels wide.

What learners see

Use these to know what learners can and can't do inside the frame.

Do learners need a Yoodli account?

Yes, for every embed except the summary of a publicly shared recording. Learners sign in inside the frame.

Learners without an account can sign up from the sign-in page, unless your organization only allows SSO sign-in. They must verify their email before they can continue: the verification link opens in a separate tab, and once it says "Your email is now verified", they go back to the frame, which continues on its own.
Signing up or signing in through an embed doesn't add anyone to your organization or to a group. Add learners the way you usually do, for example with invites, your email domain, or SSO.

Who can see an embedded program?

Members of your organization who are in one of the groups the program is assigned to. This is the same rule as in the Yoodli app.

Admins need to be in one of those groups too, to see the program in the embed.
LMS-only programs can't be shown through Web Embed. To embed one, turn off its LMS-only setting; to keep it LMS-only, use your LMS integration for it.
Everyone else sees "We couldn't find this program".

What do learners see in an embedded program?

The program's overview, with Yoodli's navigation hidden. After signing in, learners land on the program and work through its steps inside the frame.

Roleplay steps open the practice page in the frame, then show the results there.
File steps open the file in the frame.
Link steps open the link in a new browser tab. See A program's link step doesn't open, or doesn't count as done if it doesn't count.

How do learners move between a program's steps?

With Next and Done, and the program's name at the top of each step.

Next opens the next step. Done returns to the program's overview after the last step.
The program's name at the top of each step goes back to the overview.
If a learner needs to reload, have them reload the whole page, not only the frame. They land back on the program's overview, with their progress kept.

Can learners reach the rest of Yoodli from the frame?

No. The frame shows only what you embedded. The navigation menu is hidden, and each embed keeps learners on its own pages. The Library shows the learner's own recordings and recordings shared with them, not your organization's.

Does progress made in an embed count in Yoodli?

Yes. It counts exactly as it does in the Yoodli app. Learners keep their progress between visits, and admins see it in the usual places.

What happens when someone else uses the same computer?

Each person should sign out when they finish. In a program embed, click Sign out on the program's overview, the first page learners see when they open the embed. During roleplay or Loops practice, open the practice Settings menu and click Sign Out. Otherwise, the next person to open the page is signed in as them.

Does the embed change anything in a learner's Yoodli account?

It can switch the organization their account opens in. A learner who belongs to more than one organization finds Yoodli opening in your organization afterward, until they switch back with Switch organization.

Which languages do roleplays use?

The language you picked in Activity Launch Language, if you turned it on when you copied a one-roleplay or one-program snippet. Otherwise each learner's own practice language applies. The setting changes only the practice language, not the language of Yoodli's menus.

Troubleshooting

The frame shows an error message instead of Yoodli

If: the message says the page is "not in allow-list". Then: add the page's domain to the Allow list, then reload the page.
If: the message says "Integration not found". Then: your Web Embed integration was deleted. Create it again, add your page's domain to its Allow list, then copy each snippet again and replace the old ones.
If: the message is a short line of text such as "Program … not found", or says a roleplay was not found. Then: copy a new snippet from that program or roleplay, and replace the old one. If the frame shows "We couldn't find this program" instead, see A learner sees "We couldn't find this program".

The frame is blank or says Yoodli refused to connect

If: the page address starts with http://. Then: serve the page over HTTPS.
If: the page is on a bare domain such as acme.com and your Allow list only has *.acme.com. Then: add acme.com as its own entry.
If: it happened after the learner reloaded the frame. Then: reload the whole page instead. Reloading only the frame can block it.
If: you recently fixed the Allow list. Then: reload the whole page.

A learner sees "We couldn't find this program"

If: the learner isn't in any group the program is assigned to. Then: add them to one of its groups.
If: the program is LMS-only, is a Draft, or was archived. Then: this is expected. Publish the program, or turn off its LMS-only setting. In the program's settings, it reads "LMS-only access" or "This program can only be completed when launched from an LMS".
If: the learner signed in with a different account. Then: have them click Sign out and sign in with the right account.

A learner sees "We couldn't open this program"

If: the page has stayed open without a reload for a long time (30 days or more), or another person signed in on the frame without the first learner signing out. Then: reload the whole page.

Learners can't use their camera or microphone

If: the snippet on your page no longer includes its allow part. Then: paste the original snippet again.
If: the browser asked for permission and the learner declined. Then: have them allow the camera and microphone in their browser settings for this page.

Sign-in with Google, Microsoft or SSO doesn't open

If: the learner sees "Your browser may be blocking popup windows". Then: allow popups for the page. If your frame uses a sandbox, it must allow popups.

A program's link step doesn't open, or doesn't count as done

If: the learner sees "Pop-ups are blocked by your browser or the site you're on". Then: allow popups for the page.
If: the link opened in a new tab that asked the learner to sign in. Then: this is expected. Once they sign in there, the step counts as done.

The Loops embed keeps loading

If: the learner isn't in your organization, or has no loops yet. Then: add them to the organization and assign them a loop.

I don't see Manage integration on a program

If: your organization has no Web Embed integration. Then: create one first. See Step 1: Create the Web Embed integration in Set Up the Web Embed Integration.
If: your Web Embed integration hasn't been saved yet. Then: open it from the Integrations page and click Save.
If: it's grayed out with "Publish to enable embedding." Then: publish the program.

Copying a program's snippet fails with "Something went wrong"

If: you're not an Org Owner or Org Admin. Then: ask an Org Owner or Org Admin to copy the snippet. Only they can copy snippets.

I don't see Integrations in Org settings

If: you're not an Org Owner or Org Admin. Then: ask one of them to set up Web Embed.
If: your organization is on a pay-as-you-go plan. Then: Web Embed isn't available on this plan. Contact [email protected].

Still stuck? Email [email protected] with your organization name, the address of the page showing Yoodli, the snippet as it appears on your page, the learner's email, the browser they used, roughly when it happened, and a screenshot of what the frame shows.