{"id":5890,"date":"2024-04-01T08:00:06","date_gmt":"2024-04-01T08:00:06","guid":{"rendered":"https:\/\/www.process.st\/help\/docs\/embed-widget\/"},"modified":"2026-04-15T09:29:50","modified_gmt":"2026-04-15T09:29:50","slug":"embed-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.process.st\/help\/docs\/embed-widget\/","title":{"rendered":"How To Use the Embed Widget"},"content":{"rendered":"<p>The embed widget allows you to view and interact with other apps and content in your processes, without leaving your <a href=\"https:\/\/www.process.st\/help\/docs\/what-is-a-checklist\/\">workflow runs<\/a>.<\/p>\n<p>If you&#8217;d like to add a Google sheet, another Process Street workflow run, an interactive map, an Airtable view, or stream multimedia in your workflow runs, the embed widget lets you do just that.<\/p>\n<p>The embed widget also lets you preview uploaded PDFs, images, and text files directly in your workflow runs.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/4QohaBML79c\" width=\"100%\" height=\"406\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p><strong><i>Users: To add or edit the embed widget in your workflows, you must be an Administrator or a <a href=\"https:\/\/www.process.st\/help\/docs\/what-is-a-full-member\/\">Builder<\/a> who has been given <\/i><a href=\"https:\/\/www.process.st\/help\/docs\/permissions\/\"><i>&#8216;edit&#8217;<\/i><\/a><i> access by your Administrator.<\/i><\/strong><\/p>\n<h2>Using the embed widget<\/h2>\n<p>To have embedded, interactive content or apps appear in your workflow runs, you first need to add the embed widget to a task in your workflow.<\/p>\n<p>Start from your <a href=\"https:\/\/www.process.st\/help\/docs\/library\/\">library<\/a> and look for the workflow where you want to add embedded content, then click the <strong>Edit<\/strong> button next to its name.<\/p>\n<p>Inside the <a href=\"https:\/\/www.process.st\/help\/docs\/editing-templates\/\">workflow editor<\/a> you will see the <strong>&lt;\/&gt; Embed<\/strong> widget in the content section on the right-hand side. Clicking it will place the widget at the bottom of your form fields or you can drag and drop it where you want it in the center of your screen.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7761\" src=\"https:\/\/www.process.st\/help\/wp-content\/uploads\/2023\/01\/embed-widget-add.gif\" alt=\"\" width=\"100%\" \/><\/p>\n<p>To embed content, you need either the <strong>embed code<\/strong> or the <strong>URL\u00a0<\/strong>from the content you want to share.<\/p>\n<p>This varies from product to product, so be sure to test out which works for your chosen content.<\/p>\n<p>While viewing the embedded content in an active workflow run, if you want to view it in full screen, click the\u00a0<strong>expand<\/strong> button in its bottom right corner, as shown below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7770\" src=\"https:\/\/www.process.st\/help\/wp-content\/uploads\/2023\/01\/embed-full-screen.gif\" alt=\"\" width=\"100%\" \/><\/p>\n<p>To exit the full-screen view, click the <strong>X<\/strong> button in its top right corner, as shown above.<\/p>\n<p><em>Check the troubleshooting notes at the bottom of this article in case you hit a snag<\/em>.<\/p>\n<h3>Embed a YouTube video<\/h3>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7764\" src=\"https:\/\/www.process.st\/help\/wp-content\/uploads\/2023\/01\/embed-youtube.gif\" alt=\"\" width=\"100%\" \/><\/p>\n<p>Once you&#8217;ve pasted your content&#8217;s link into the embed widget, you&#8217;ll see the content appear in your workflow.<\/p>\n<p><a href=\"https:\/\/www.process.st\/help\/publish-and-run\/\">Publish and run<\/a> your workflow, to test the interactive content added to your workflow.<\/p>\n<h3>Using variables in your embed widget<\/h3>\n<p>You can also use variables from the <a href=\"https:\/\/www.process.st\/help\/docs\/form-fields\/#website-field\">website form field<\/a> to fill the embed widget automatically.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7765\" src=\"https:\/\/www.process.st\/help\/wp-content\/uploads\/2023\/01\/embed-variable.gif\" alt=\"\" width=\"100%\" \/><\/p>\n<p>To set this up, you need to have at least one <a href=\"https:\/\/www.process.st\/help\/docs\/form-fields\/#website-field\">website field<\/a> in your workflow.<\/p>\n<p>Then add the embed widget to your workflow and\u00a0click the <strong>magic wand<\/strong> next to it. In the variables dropdown, look for the website form field to push a URL into it from elsewhere in the workflow run.<\/p>\n<p>Since this is a variable, the embedded website will only display once the website form field is populated in an active run.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7766\" src=\"https:\/\/www.process.st\/help\/wp-content\/uploads\/2023\/01\/embed-variable-active-run.gif\" alt=\"\" width=\"100%\" \/><\/p>\n<h2>Preview uploaded files<\/h2>\n<p>The embed widget can preview files uploaded through a <a href=\"https:\/\/www.process.st\/help\/docs\/form-fields\/\">File Upload form field<\/a>. This lets you view PDFs, images, and text files directly in your workflow runs without leaving Process Street.<\/p>\n<h3>Set up file preview<\/h3>\n<p>To preview an uploaded file in the embed widget:<\/p>\n<ol>\n<li>Open your workflow in the <a href=\"https:\/\/www.process.st\/help\/docs\/editing-templates\/\">workflow editor<\/a>.<\/li>\n<li>Add a <strong>File Upload<\/strong> form field to a task.<\/li>\n<li>Add an <strong>&lt;\/&gt; Embed<\/strong> widget to the same task (or any task in the workflow).<\/li>\n<li>Click the <strong>magic wand<\/strong> next to the embed widget.<\/li>\n<li>Select the File Upload form field variable from the dropdown.<\/li>\n<li><a href=\"https:\/\/www.process.st\/help\/publish-and-run\/\">Publish<\/a> your workflow.<\/li>\n<\/ol>\n<p>When someone runs the workflow and uploads a file through the File Upload field, the embed widget displays a preview of that file automatically.<\/p>\n<p>Click the <strong>expand<\/strong> button on the embed widget to view the file in full screen. From the full-screen view, you can read through the document, download it, or print it.<\/p>\n<h3>Supported file types<\/h3>\n<ul>\n<li><strong>PDFs<\/strong> \u2014 Full document preview with scroll, download, and print options. PDF preview only works with files uploaded through the File Upload form field (not PDFs from external URLs).<\/li>\n<li><strong>Images<\/strong> \u2014 Inline image preview. Works with files from any source.<\/li>\n<li><strong>Text files<\/strong> \u2014 Displays file contents directly. Works with files from any source.<\/li>\n<\/ul>\n<blockquote><p><strong>Note:<\/strong> For PDFs, the file must be uploaded via the File Upload form field. External PDF URLs are not currently supported for preview in the embed widget.<\/p><\/blockquote>\n<h2>More examples<\/h2>\n<h3>Embed a Google sheet<\/h3>\n<ul>\n<li>Edit your workflow and click on the embed widget or drop it into place<\/li>\n<li>Go to your <a href=\"https:\/\/www.google.com\/sheets\/about\/\">Google sheet<\/a> and copy its URL<\/li>\n<li>Paste the URL into the embed widget<\/li>\n<li>Publish changes to your workflow<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7762\" src=\"https:\/\/www.process.st\/help\/wp-content\/uploads\/2023\/01\/embed-widget-google-sheet.gif\" alt=\"\" width=\"100%\" \/><\/p>\n<p><strong>Google Sheets Pro Tip:\u00a0<\/strong><\/p>\n<p>You can adjust the URL parameters when embedding a Google Sheet. Just add the parameters before\u00a0#gid=0 at the end of the URL:<\/p>\n<p>rm=minimal<br \/>\nrm=full<br \/>\nrm=embedded<br \/>\nrm=demo<br \/>\nrm=(render mode)<br \/>\nui=2 (select the interface version)<br \/>\nchrome=false (full screen mode)<br \/>\ngid=24 (Which sheet you want to display)<br \/>\nwidget=false<br \/>\nsingle=true<br \/>\nrange=A2:AA26 Output=html<br \/>\nwidget=false<br \/>\nwidth=(width)<br \/>\nheight=(height)<br \/>\nframeborder=(size of border)<br \/>\nq=(Whatever) Search Query<br \/>\nviewer?<br \/>\nstart=<br \/>\nchannel=<br \/>\nibd=<br \/>\nclient=<\/p>\n<h3>Embed Calendly<\/h3>\n<ul>\n<li>Edit your workflow and click on the embed widget or drop it into place<\/li>\n<li>Go to <a href=\"https:\/\/calendly.com\/\">Calendly<\/a> and choose a meeting link to <strong>copy<\/strong><\/li>\n<li><strong>Paste<\/strong> the link into the embed widget<\/li>\n<li>Publish changes to your workflow<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7767\" src=\"https:\/\/www.process.st\/help\/wp-content\/uploads\/2023\/01\/embed-calendly.gif\" alt=\"\" width=\"100%\" \/><\/p>\n<h3>Embed Airtable<\/h3>\n<ul>\n<li>Edit your workflow and click on the embed widget or drop it into place<\/li>\n<li>Open Airtable and click on &#8220;<strong>Share view<\/strong>&#8221; then &#8220;<strong>Create a shareable grid view link<\/strong>&#8220;<\/li>\n<li>Click &#8220;<strong>Embed this view on your site<\/strong>&#8221; which opens up in a new tab<\/li>\n<li><strong>Copy<\/strong> the embed code<\/li>\n<li><strong>Paste<\/strong> the link into the embed widget in your workflow<\/li>\n<li>Publish changes to your workflow<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7763\" src=\"https:\/\/www.process.st\/help\/wp-content\/uploads\/2023\/01\/embed-widget-airtable.gif\" alt=\"\" width=\"100%\" \/><\/p>\n<h3>Embed a Google map<\/h3>\n<ul>\n<li>Edit your workflow and click on the embed widget or drop it into place<\/li>\n<li>Go to <a href=\"https:\/\/www.google.com\/maps\">Google maps,<\/a> find your location, and click on the &#8216;<strong>Share<\/strong>&#8216; button<\/li>\n<li>Click on &#8216;<strong>Embed a map<\/strong>&#8216;<\/li>\n<li><strong>Copy<\/strong> the HTML code<\/li>\n<li><strong>Paste<\/strong> that code into the embed widget<\/li>\n<li>Publish changes to your workflow<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7768\" src=\"https:\/\/www.process.st\/help\/wp-content\/uploads\/2023\/01\/embed-map.gif\" alt=\"\" width=\"100%\" \/><\/p>\n<h3>Embed a Google doc<\/h3>\n<ul>\n<li>Edit your workflow and click on the embed widget or drop it into place<\/li>\n<li>Go to <a href=\"https:\/\/www.google.com\/docs\/about\/\">Google docs<\/a> and find the document you&#8217;d like to embed<\/li>\n<li><strong>Copy<\/strong> the URL from your doc<\/li>\n<li><strong>Paste<\/strong> the link into the embed widget in your workflow<\/li>\n<li>Publish changes to your workflow<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-7769\" src=\"https:\/\/www.process.st\/help\/wp-content\/uploads\/2023\/01\/embed-doc.gif\" alt=\"\" width=\"100%\" \/><\/p>\n<p>You can also use variables in the settings of an embed widget to be able to auto-fill that field from an input made elsewhere in your workflow run. Learn more about <a href=\"https:\/\/www.process.st\/help\/docs\/auto-fill-form-fields\/\">auto-filling fields with variables<\/a>.<\/p>\n<h2>Troubleshooting<\/h2>\n<p>If you can&#8217;t see your content after pasting in the embed code or the URL, there are a couple of reasons why it isn&#8217;t working. One is that you need to find out if the URL works or if you need to use the full embed code. With some apps and sites, finding this out is a case of trial and error.<\/p>\n<p>In other cases, it might help to shorten the URL using TinyURL or similar apps before you embed them.<\/p>\n<p>Another reason could be that whilst most websites and content creators allow you to embed their content elsewhere, some don&#8217;t. If you keep seeing an error message when trying to add your URL, it could be that it&#8217;s been blocked from sharing by the creator or the application itself.<\/p>\n<p>If you need any help with this topic, you can reach out to our <a href=\"mailto:support@mail.process-street.com\">support<\/a> team.<\/p>\n<p>Learn more about how the other widgets work:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.process.st\/help\/docs\/image-widget\/\">Image widget<\/a><\/li>\n<li><a href=\"https:\/\/www.process.st\/help\/docs\/text-widget\/\">Text widget<\/a><\/li>\n<li><a href=\"https:\/\/www.process.st\/help\/docs\/video-widget\/\">Video widget<\/a><\/li>\n<li><a href=\"https:\/\/www.process.st\/help\/docs\/file-widget\/\">File widget<\/a><\/li>\n<li><a href=\"https:\/\/www.process.st\/help\/docs\/form-fields\/\">Form fields<\/a><\/li>\n<li><a href=\"https:\/\/www.process.st\/help\/docs\/how-subtask-work\/\">Subtasks<\/a><\/li>\n<li><a href=\"https:\/\/www.process.st\/help\/docs\/email-widget\/\">Email widget<\/a><\/li>\n<li><a href=\"https:\/\/www.process.st\/help\/docs\/page-widget\/\">Page widget<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The embed widget allows you to view and interact with other apps and content in your processes, without leaving your workflow runs. If you&#8217;d like to add a Google sheet, another Process Street workflow run, an interactive map, an Airtable view, or stream multimedia in your workflow runs, the embed widget lets you do just [&hellip;]<\/p>\n","protected":false},"author":11,"template":"","meta":{"_acf_changed":false,"available_plan":"All plans","available_product":"Workflows","footnotes":""},"ht_kb_category":[158],"ht_kb_tag":[380,381],"class_list":["post-5890","ht_kb","type-ht_kb","status-publish","hentry","ht_kb_category-build-edit-workflows","ht_kb_tag-embed","ht_kb_tag-embedding"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.process.st\/help\/wp-json\/wp\/v2\/ht_kb\/5890","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.process.st\/help\/wp-json\/wp\/v2\/ht_kb"}],"about":[{"href":"https:\/\/www.process.st\/help\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.process.st\/help\/wp-json\/wp\/v2\/users\/11"}],"version-history":[{"count":8,"href":"https:\/\/www.process.st\/help\/wp-json\/wp\/v2\/ht_kb\/5890\/revisions"}],"predecessor-version":[{"id":9822,"href":"https:\/\/www.process.st\/help\/wp-json\/wp\/v2\/ht_kb\/5890\/revisions\/9822"}],"wp:attachment":[{"href":"https:\/\/www.process.st\/help\/wp-json\/wp\/v2\/media?parent=5890"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.process.st\/help\/wp-json\/wp\/v2\/ht_kb_category?post=5890"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.process.st\/help\/wp-json\/wp\/v2\/ht_kb_tag?post=5890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}