https://managedcomponents.dev/assets/js/257d6019.931fc1a1.js

1"use strict";(self.webpackChunkmanagedcomponents_dev=self.webpackChunkmanagedcomponents_dev||[]).push([[3322],{3905:function(e,t,n){n.d(t,{Zo:function(){return d},kt:function(){return u}});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,a=function(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),p=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=p(e.components);return r.createElement(s.Provider,{value:t},e.children)},l={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,d=c(e,["components","mdxType","originalType","parentName"]),m=p(n),u=a,f=m["".concat(s,".").concat(u)]||m[u]||l[u]||o;return n?r.createElement(f,i(i({ref:t},d),{},{components:n})):r.createElement(f,i({ref:t},d))}));function u(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:a,i[1]=c;for(var p=2;p<o;p++)i[p]=n[p];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}m.displayName="MDXCreateElement"},3929:function(e,t,n){n.r(t),n.d(t,{assets:function(){return d},contentTitle:function(){return s},default:function(){return u},frontMatter:function(){return c},metadata:function(){return p},toc:function(){return l}});var r=n(7462),a=n(3366),o=(n(7294),n(3905)),i=["components"],c={},s="Embed support",p={unversionedId:"embed-and-widgets/embeds",id:"embed-and-widgets/embeds",title:"Embed support",description:"To place an embed in the page, the website owner includes a placeholder div element. For example, a weather embed could look like this:",source:"@site/specs/embed-and-widgets/embeds.md",sourceDirName:"embed-and-widgets",slug:"/embed-and-widgets/embeds",permalink:"/specs/embed-and-widgets/embeds",draft:!1,editUrl:"https://github.com/managed-components/docs/edit/main/specs/embed-and-widgets/embeds.md",tags:[],version:"current",frontMatter:{},sidebar:"tutorialSidebar",previous:{title:"Embeds and Widgets",permalink:"/specs/category/embeds-and-widgets"},next:{title:"Widget support",permalink:"/specs/embed-and-widgets/widgets"}},d={},l=[],m={toc:l};function u(e){var t=e.components,n=(0,a.Z)(e,i);return(0,o.kt)("wrapper",(0,r.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"embed-support"},"Embed support"),(0,o.kt)("p",null,"To place an embed in the page, the website owner includes a placeholder ",(0,o.kt)("inlineCode",{parentName:"p"},"div")," element. For example, a weather embed could look like this:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-html"},'<div\n  data-component-embed="weather-example"\n  data-dark-theme\n  data-location="Portugal"\n></div>\n')),(0,o.kt)("p",null,"Inside the External Component, the embed will be defined like in this example:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},'manager.registerEmbed(\n  "weather-example",\n  async ({ parameters }: { parameters: { [k: string]: string } }) =>

1 {\n    const location = parameters["location"];\n    const embed = await manager.useCache("weather-" + location, async () => {\n      try {\n        const response = await manager.fetch(\n          `https://wttr.in/${location}?format=j1`\n        );\n        const data = await response.json();\n        const [summary] = data.current_condition;\n        const { temp_C } = summary;\n        return `<p>Temperature in ${location} is: ${temp_C} &#8451;</p>`;\n      } catch (error) {\n        console.error("error fetching weather for embed:", error);\n        return `<p>Error loading weather for ${location}: ${error}</p>`;\n      }\n    });\n    return embed;\n  }\n);\n')),(0,o.kt)("p",null,"In the above example, the tool defines an embed called ",(0,o.kt)("inlineCode",{parentName:"p"},"weather-example"),". It makes a request to a remote API, caches it, and then renders a simple html, using the data from the fetch response."))}u.isMDXComponent=!0}}]);