Developer

Working with Live Preview

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: 

  1. Open the index.html file.
  2. 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>
  3. 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>
    
    
  4. 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 

  1. Select the project that corresponds with your web app integrated with Nimvio content before.
    https://media.nimvio.com/Project_c1457a00-729a-456c-841b-5c10710e8a18/Media/Resources/Guide/Developer%20-%20working%20with%20live%20preview/existing-project_published.png
     
  2. Access the settings navigation
     
    https://media.nimvio.com/Project_c1457a00-729a-456c-841b-5c10710e8a18/Media/Resources/Guide/Developer%20-%20working%20with%20live%20preview/settings_published.png

     

  3. Navigate to the integration menu. In this section, you must fill in the preview URL input. Ensure that you have deployed the project with an HTTPS URL. You have the flexibility to use any web hosting service to deploy your project. See this example how to deploy your project on netlify Get started with Netlify | Netlify Docs. Once URL is ready, put it inside the Preview URL input.
    https://media.nimvio.com/Project_c1457a00-729a-456c-841b-5c10710e8a18/Media/Resources/Guide/Developer%20-%20working%20with%20live%20preview/update%20integration_published.png
     

     

  4. Next, go to the website navigation, and to display the element wrapper, click on "Show Editable Elements." This will allow you to view and interact with the editable elements on the webpage. 
     
    https://media.nimvio.com/Project_c1457a00-729a-456c-841b-5c10710e8a18/Media/Resources/Guide/Developer%20-%20working%20with%20live%20preview/click%20editable%20elem_published.png

     

  5. Now, you can see the editable elements that were set up using the data attributes earlier. To easily identify and edit the content associated with each element, simply click the edit icon. It will automatically link to the content and display the content form for easy editing.
     
    https://media.nimvio.com/Project_c1457a00-729a-456c-841b-5c10710e8a18/Media/Resources/Guide/Developer%20-%20working%20with%20live%20preview/show%20elements_published.png

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:

https://media.nimvio.com/Project_c1457a00-729a-456c-841b-5c10710e8a18/Media/Resources/Guide/Developer%20-%20working%20with%20live%20preview/example_published.gif

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: