Coast Demo Tutorial: iFrame example

The marketing team also instructed you that, after a user successfully creates an account, they should be prompted to connect their financial data via Plaid.

Use the Left Panel on Coast to add a new step. Select the Embed step to get started.

Unlike the cURL/JSON step we created earlier, you'll notice that the Embed step, by default is loaded up with a single tab, as supposed to 3. The Construct step here is straightforward. Since in this application we will be rendering the Plaid connection widget via URL, we do not need to define a request body. Simple put in an empty JSON object, {} to continue.

On the iFrame tab, enter the URL or HTML you wish to render. In this case, since Plaid's connection can be powered via HTML (using a script) tag, we can the following in the iFrame Editor:

Plaid Connection

iFrame Example

<html>
  <head>
    <script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
</head>
<body>
<script>
  var linkHandler = Plaid.create({
    clientName: '{{this.db.instance.prospectDetails.company}}',
    env: "sandbox",
    key: "5e1be038d6380e8f39dd2750860cae",
    product: "auth",
    apiVersion: "v2",
    forceIframe: false,
    selectAccount: true,
    onLoad: function() {
    },
    onSuccess: function(public_token, metadata, e) {
      var responseFromPlaid = JSON.stringify(metadata);
      window?.parent?.setNavForward();
    },
    onExit: function(err, metadata) {
      if (err != null) {
        console.log(err);
      }
    }
  });
  linkHandler.open();
</script>
</body>
</html>

Note that we are pulling in the prospect's name via this.db.instance.prospectDetails.company

Hit the Designer tab at the top bar and you'll see the Plaid connection demo rendering in a mobile view.

Since we only have an empty object in the codeblock, let's hide it. You can easily hide the codeblock, while on the Designer, on the right panel under Tab → Code Block, then toggle Display Code.

Assuming that all went according to plan, you'll now have a step that has a functioning Plaid connection demo 🚀

Congratulations on completing the tutorial! 🎉 You are one step closer to building your own rock star API demo.