Home / / Embedding External Service URLs

Embedding External Service URLs

2 min , 2 sec read

Overview:

This Koopid Tech Note covers steps needed to embed an outside service URL into Koopid workflows.

***Note: If the origin of the external service/URL is DIFFERENT from the application URL, you are not able to embed the external service link into the application. If you control the website and URL you are embedding into the application, you need to update the settings of the external link being embedded to change the origin to be the same as the URL for the application.  

 

Adding URLs from an Outside Service to Workflows

  1. Once you’re logged into the Koopid platform for your provider, toggle into Expert Mode using the option at the top of the left side menu.
  2. Under Services, click on Expert Flows.

  3.  When the Manage Workflow screen appears, select the option to Create a new workflow or open an existing workflow by clicking on the Select Existing workflow option.

     

  4. With your workflow open, select and drag the Send a Message component  from the right side-menu to the design workflow screen.
  5. Select the new component on your screen, and in the Send a Message Output Component Settings menu on the right, update the Message Type to Plug-In and update the Media Type to URL.
  6. On the “Or Enter Path or URL” field add the public URL you want to embed into your workflow.  *Note: This URL needs to be a publicly accessible URL setup to allow users to embed the URL into their website or application. This DOES NOT work with any general URL.
  7. On the next field “Add style CSS” you should add a width and height you want the embedded iframe to size in the window. (Ex: width: 500px; height:500px;)

  8. Add a “Node Title” a few fields down, and SAVE the component settings from the top of the page. 

 

Embedding Public URLs

  1. Use a public URL setup to be embedded into other applications. For example, you can use a YouTube video embed link or a Google Maps embed link within a Koopid workflow.

 

      • Then pull the URL out of the embed code and paste that URL into the workflow outpost component.

<iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/TgVQpoTCDAA&#8221; frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

Using Cross-Origin URLs

Use of a URL straight from the address bar after visiting a website that has a different origin, and is NOT setup to be embedded into another web application, will result in a CORS error. The external service will not appea­­­­­r embedded in the workflow and will give a form of the error below.

Example: https://www.google.com (http://www.google.com refused to connect)

*Note: If the origin of the external service/URL is DIFFERENT from the application URL, you are not able to embed the external service link into the application. If you control the website and URL you are embedding into the application, you need to update the settings of the external link being embedded to change the origin to be the same as the URL for the application.

Other Service Embed Options

In addition to using the output component, you could potentially also use the External Service (Server) API to request data from the other provider, and then build a custom plug-in to receive the data from the API call and display it to the user.

For external origin services, you could also redirect the user in a new browser window to the other provider’s site to complete their request.