Skip to main content

Embeddable Task Step

Paul Holder avatar
Written by Paul Holder
Updated over a year ago

The OnRamp "Embeddable" step is an incredibly powerful tool that enables you to embed - or insert in - nearly anything from the web into your tasks that can then be interacted with and completed within OnRamp.

Using Embed in a task

Let's say we have a Google Slides presentation we want to share with our customers. To use embed this in a task...

  1. Pull up the Playbook or Project where you want this task/step to live

  2. Create a new task or "Set up subtasks" for an existing task

  3. Pull up the task step type options by clicking (+)

  4. Select "Embeddable"

URL vs. HTML Options

There are two different options for how to embed content into a step.

URL: Embed an entire interactive web page into the step, as if you were visiting the page from your browser.

HTML: Some services provide an "Embed HTML" code snippet you can copy and paste into OnRamp. If offered, typically this provides a better experience purpose-built for embedding the particular content.

  • For example, if you embed an entire YouTube page URL, the embed will appear with all the headers, comments, videos, and other content surrounding the video on the page (as if you visited it directly in your browser). If instead you just want to show the video, you'd use YouTube's sharing feature which includes Embed HTML code that will restrict view to just the video content

For our example, Google Slides does offer an HTML snippet for embedding our presentation, so to insert:

  • Find the presentation you want to share, click File>Share>Publish to Web>Embed>Publish

  • Copy the HTML snippet that is generated and paste into the step

  • A preview will appear

  • Click Save

Sizing

You can adjust the size of the content and iframe window to best suit the content.

With an HTML snippet, the content itself has a size - in the code above the "width" and "height" can be adjusted to change the actual size of the presentation.

The additional Width and Height options refer to the iframe "window" surrounding the content - in this case, setting a Width to 480 and Height to 324 means there are no scroll bars visible.

Play around with the sizing to get it best for your content. You can preview the step in the Portal to see how different size options will render. Don't forget to Save!

Embed in the Customer Portal

Of course, if the task in question is assigned to the Customer, the step will appear in the Customer Portal. In our example, this can look something like this:

The content is fully interactive, with the ability for the user to move forward and backward in this presentation for this example. If a URL, the web page will be full interactive as well.

Note: OnRamp is not aware of any actions performed within the content window, so regardless of the ask, the user must click "Continue" or "Complete task" in order to update their progress on the task

Example Use Cases

  • Share an important help article - if the content ever changes, the rendering will be automatically updated!

  • Have user watch a video - Loom, Wistia, YouTube, Vimeo...anything hosted

  • Collect data via a Google Sheet - present rows and columns for user to fill out or update

  • Share your Calendly availability and have user book a meeting - in this example, Calendly does have an HTML embed code to use

  • Complete actions in a SaaS tool - embed the direct page to have user log in and take actions in another piece of software

  • The list is endless!

Did this answer your question?