Table of Contents:
The Nimvio Live Preview SDK serves as a convenient solution for seamlessly integrating interactive elements into your webpage. These elements are generated by analyzing designated HTML data attributes on your page and then incorporating Nimvio links based on those attributes. When users interact with these specified elements, they will be directed to Nimvio or navigate within the Nimvio Website Management page, depending on the type and context of their usage.
NPM
npm i @nimvio/live-preview-sdk or npm install @nimvio/live-preview-sdk
Yarn
yarn add @nimvio/live-preview-sdk
CDN
https://
cdn.jsdelivr.net/npm/@nimvio/live-preview-sdk@0.1.4
Prerequisite
If you don't have any content in Nimvio, please refer to this guide for instructions on how to get started . Once you have the necessary content, you can proceed to the next steps.
In this example, we are referring the previous project that was explained in the Developer Getting Started . To implement the Nimvio Live Preview SDK, follow these steps:
<body>
add the following script tag to include the Nimvio Live Preview SDK from the jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/@nimvio/live-preview-sdk@0.1.4"></script>
<div class="wrapper" data-nimvio-content-id="YOUR_CONTENT_ID">
<!-- The HTML elements are there only to display data from Nimvio. Using JavaScript,
you'll pull the content from your Nimvio project into the elements -->
<img id="banner">
<h1 id="headline"></h1>
<p id="bodyText"></p>
</div>
The data-nimvio-project-id attribute can be placed in any node that wraps all descendant nodes. This means you can choose the parent node that encompasses the section you want to interact with. Then add some script to integrate the live preview. Here's how the code will look like:
<!DOCTYPE html>
<html>
<head>
<title>Hello World with Nimvio</title>
<script src="main.js" async defer></script>
</head>
<body data-nimvio-project-id="YOUR_PROJECT_ID">
<div class="wrapper" data-nimvio-content-id="YOUR_CONTENT_ID">
<!-- The HTML elements are there only to display data from Nimvio.
Using JavaScript, you'll pull the content from your Nimvio project into the elements -->
<img id="banner">
<h1 id="headline"></h1>
<p id="bodyText"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/@nimvio/live-preview-sdk@0.1.4"></script>
<script type="text/javascript">
const nimvioSdk = WebLink.init({ // SDK configuration
queryParams: "preview",
disableWeblink: false,
})
</script>
Great! Now that your setup is complete, you can explore more specific steps and examples in the documentation or user guide provided by Nimvio. The documentation will likely contain in-depth explanations, advanced features, and code examples to help you get the most out of the Nimvio Live Preview SDK.
Make sure to check out the documentation to fully utilize the capabilities of Nimvio Live Preview SDK and enhance your interactive elements on your webpage.
Previously, we have successfully integrated the project with nimvio & Nimvio's live preview. Now, how can we see content changes directly without having to publish content? This is how the function works.
Open your index.html
file and add some scripts on it.
// define the content id for the live preview when change the content
const contentID = "YOUR_CONTENT_ID";
// live preview on content change
const previewChangeListener = nimvioSdk.livePreviewUtils.onPreviewContentChange((newData) => {
const { id, formData } = newData;
if (id === contentID) { // check if the current preview content is same with the content edit
const { headline, bodyText, mediaUrl } = formData;
const sectionEl = document.querySelector(`[data-nimvio-content-id=${contentID}]`);
// headline update
sectionEl.querySelector("#headline").innerText = headline;
// body text update
// if the body is using RTE component, need to using innerHTML instead of innerText
sectionEl.querySelector("#bodyText").innerHTML = bodyText;
// media update
sectionEl.querySelector("#banner").src = mediaUrl.MediaUrl;
}
});
This utilization will trigger every time when we update the content. See this example:
For more information about the nimvio-live-preview sdk, check out the : nimvio-github/live-preview-sdk: Nimvio's Live Preview SDK
Congratulations! You have just integrated a website with a live preview sdk. Keep exploring others below: