Embed Yoodli Programs on Your Learning Tools and Website

We’re making Yoodli programs and roleplays even more accessible off our platform to meet your learners where they’re already practicing.

Program web embed puts a full Yoodli program with roleplays, files, and links inside an iframe on your own site. Learners sign in, work through the program, and complete without ever having to leave your page.

This makes it significantly easier to meet your learners where they are already working from and deliver training on an internal portal, LMS landing page, or intranet.

Why This Matters

Now you can meet users where they learn and work from, allowing it to be a natural part of the flow of training or practice. If you want to contain training in a specific place in your internal tools, an LMS where the majority of your learning lives, or an employee portal you can specify which training lives where and give that experience more naturally within your own brand.

Setup

Three things must be true before a web embed program works:

• Your organization has a Web Embed integration with at least one host name on the allow-list.
• The program is published. Draft programs cannot be embedded.
• You are an admin with integration permissions.

Step 1 – Set up the Web Embed integration

1. Go to Org Settings → Integrations.
2. Select Create an integration and choose Web Embed, or open your existing Web Embed integration.
3. Under Host name, add every host you plan to embed on — for example training.acme.com. Enter the host name only, without https://.
4. Save.

The host allow-list is enforced on every embed load. A page served from a host that is not on the list is refused. Host names are set once per integration and apply to every embedded surface, programs included.

Step 2 — Publish the program

Go to Programs, open the program, and publish it. Until then, Manage integration appears in the program’s menu but is greyed out with the tooltip.  Publish to enable embedding. 

Step 3 — Copy the snippet

The snippet lives on the program itself, not on the integrations page. Each program has its own snippet.

1. Go to Programs.
2. Open the three-dot menu on the program row — or the three-dot menu on the program’s detail page — and select Manage integration.
3. A modal opens titled Embed “<program name>” on your website.
4. Optionally set Size — a width and a height. Both accept percentages (100%) or pixels (900). In pixels the minimum is 375 wide by 800 tall.
5. Optionally set Activity Launch Language. This sets the practice language for every roleplay step in the program.
6. Select the copy button.

Tip: The size and language choices are baked into the copied snippet. Change either one and copy again as editing the modal does not update a snippet you already pasted.

Step 4 — Paste it into your page

Paste the snippet into your page’s HTML where you want the program to appear. Keep the allow attribute exactly as copied. It delegates camera and microphone to the Yoodli frame, which the roleplay steps need in order to record. 

If you add a sandbox attribute of your own, include allow-popups. Link steps open the external URL in a new tab, and a sandbox without allow-popups suppresses that.

Congrats! You published your first off-platform learning for your users!

Who Benefits

• Builders, Managers, and L&D teams are able to launch programs from inside the tools they already work on in conjunction with Yoodli. This creates a more seamless experience for where you want to enable teams and introduce learning and roleplay. 
• Learners don’t have to juggle between tabs in order to complete programs and practice roleplays. They can stay in the systems they’re familiar with, and gain the learning delivered through Yoodli on their own internal tools.

Get Started

Following the steps above allow you to deliver a completely new and unique experience for your learners. If you’d like to learn more about innovative ways to deliver programs, roleplays, and learning to your users we’d love to hear from you!

Want to use Yoodli for your team? Let’s chat!