It is possible to embed the design preview only. It's useful in cases when you build the form yourself but still want to offer user a way to preview the changes before generating an image.
When the script loads, it will attempt to locate
elements with the CSS class "dynapictures-preview-widget" and render the preview with default layer values. However, if you integrate the widget into a dynamic application based on Angular or React, the
element acting as a container may not be ready in the DOM yet. That's why you can also manually invoke the initial load function once you are certain that the container
element is ready:
if (elem) window.gDynaPreviewWidget.load();
Once the widget is initialized and the initial preview is rendered, you can begin passing custom input parameters and replacing the default values that were provided for the layers during the template design process. Please refer to a code example on the right.
Update preview widget with new data
window.gDynaPreviewWidget.updateLayers("8b851a3df0", [
{
name: "text1",
text: "Hello World!"
},
{
name: "image2",
imageUrl: "https://dynapictures.com/images/welcome/image_generation_for_ecomm_2x.jpg",
},
]);