Get the embedding code of a component
It is possible to use components built in XM Cloud Components in other page builders than XM Cloud. This is done by copying the code of the component and pasting it where you want it.
To get the embedding code of a component:
-
To embed a component and all its versions, click Get embedding code. This button can be found in various places:
-
In the Components library, in the thumbnail of a component, click
. -
In the Components builder, click
to the right of the version you want to get the embedding code for. -
In the Components builder, click anywhere in the UI outside of a component canvas to open the Overview pane.
-
-
In the Embedding code dialog, in the drop-down menu, you can see all the possible versions and bundles you can get the embedding code for. Click one of the following:
-
Specific version - to display the code for a stand-alone specific version.
-
Bundle - to display the code for all versions of the component at different breakpoints.
-
-
To select which code you want to embed, click one of the following:
-
Published - this is the component as it is currently saved on Sitecore Edge.
-
Staged - this is the code for the component as it is currently available in Pages.
-
-
To select how you want the code, click either React, React Server, Web Component, or DOM API.
-
For components using data sources, you can decide what to do with the data:
-
Click Sample data to package in the code the data from the data sources. This means that the data will not self-update anymore.
-
Click Fetch to generate code that will retrieve the data from a server or a network location.
-
Click No data to get an embedding code without any data at all.
-
-
To remove typescript from the embedding code, click the Typescript switch off. Removing typescript code means that you can paste the component code somewhere that doesn't have a typescript post processor (for example, directly onto a webpage, or a content management system).
-
Resource fetching (stylesheet and/or JavaScript) happens while the page it is inserted in is loading. It leads to faster rendering of the component for dynamic clientside-only rendering. However, you can click the Preload resources switch off to disable resource fetching if you work with JSS, as everything in JSS is rendered on the server and stylesheet is loaded as a part of the page.
-
Optionally, Preview the component on Codepen.
-
Click Copy code.
You can now paste the embedding code of the component into any page builder code.