Create Taffrail embed

by taffrail

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempor, quam ac gravida cursus, purus mi posuere odio, eu rhoncus mi sapien vel felis. Nunc dictum libero ut dolor vestibulum, quis fringilla ligula molestie. Nam porta diam nec malesuada dapibus. Donec sit amet erat quis metus blandit pellentesque sit amet at elit. Aenean id eros at leo suscipit aliquam.</p>

<aside id="taffrail">
  <div><!--taffrail here--></div>
</aside>

<p>Praesent lobortis arcu et ipsum auctor egestas. Vivamus nec enim ullamcorper, elementum massa a, porttitor orci. Maecenas sed molestie augue. Maecenas dapibus vitae diam sed blandit. In ultrices magna sed velit tincidunt sodales. Etiam finibus mauris in ante iaculis dignissim. Proin viverra sapien eu finibus gravida.</p>

CSS

body {
  font-family: Univers;
  font-weight: 300;
  margin: 1rem;
}

p {
  color: gray;
  margin: 0 6rem;
}

#taffrail {
  border: 1px solid #ccc;
  border-radius: 6px;
  margin: 1.5rem;
  min-height: 250px;
}

#taffrail > div {
  padding: 1rem 1.5rem 1.5rem 1.5rem;
}

JavaScript

/**
This demo illustrates creating a Taffrail embed. 
1. Set up the Taffrail rule parameters.
2. Build the embed URL
3. Fetch the oEmbed API
4. Insert the `html` into a container
*/

// Step 1
const ruleId = `TF766d_1Q8-6X-ZSZIvL3PH`;
const ruleParams = {
	Roth_Income_Menu: "ROTH ELIGIBLE",
  Tax_Filing_Status: "single",
  "Show_Compact_Version?": true,
  "Show_Headline?": false,
}

// Step 2
const ruleUrl = `https://morningstar.advice.taffrail.com/embed/${ruleId}/i?${new URLSearchParams(ruleParams).toString()}`;

// Step 3
$.getJSON(`https://morningstar.advice.taffrail.com/api/oembed?url=${encodeURIComponent(ruleUrl)}`).then(api => {
	// Step 4
  $("#taffrail > div").html(api.html);
});