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 pages. 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, in the Components library, in the thumbnail of a component, click
.Alternatively, to export a specific version of a component, click on the component to open it in the Components builder, and click
to the right of the version you want to get the embedding code for. -
In the drop-down menu, click Get embedding code.
-
In the Embedding code dialog box, click one of the following:
-
Responsive - to display the code for all versions of the component at different breakpoints.
-
Specific version - to display the code for the specific version you clicked on.
-
-
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 XM Cloud Pages.
-
Draft - this is the code for the component as it is currently seen in the Components builder.
-
-
To select how you want the code, click either React, Web Component, or DOM API.
-
For non-responsive components, you can turn the option Auto-update off if you want to lock a certain version of the code while you keep working on the component in the Components builder.
NoteThe Auto-update option is on by default for responsive components, which means that the code in the dialog is the one that was most recently saved, staged, or published.
-
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.
-
-
Optionally, Preview the component on Codepen.
-
Click Copy code.
You can now paste the embedding code of the component into any page builder code.