Working with Live Preview

Table of Contents:

Introduction
Installation
Working with onPreviewContentChange utilization

Introduction

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.

Installation

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.

Usage

Initialize the SDK into your web app

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:

Open the index.html file.
Inside the <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>
```

To generate the interactive elements using the Nimvio Live Preview SDK, you need to add the data attributes data-nimvio-project-id and data-nimvio-content-id to your section in the index.html file. The values for these attributes should be based on your context in Nimvio. Here's how you can add the data attributes to your section:

 <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.

Integrate the project in nimvio

Working with onPreviewContentChange utilization

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

What's Next?

Congratulations! You have just integrated a website with a live preview sdk. Keep exploring others below: