Integration

Web slider has two types of integration.

• Integration using exported files.
• Integration using Buckets (S3, Linode, Digital ocean)

For any type of integration we need two urls and assets.

• Slider URL slider.json. It contain all information for running animation project into website.
• Player URL wsplayer.js. It contains code for running project defined in slider.json.

info

Bucket integration is recommended for easier update. It provides quick project update directly form Web Slide app.

Lets see how we can get these urls.

Integrations

Integration using exported files

Steps to get integration files

• Open Publish panel
  

• Click Download button
  

• Unzip and upload package files to website server location.
  

• Here we can see slider.json and wsplayer/wsplayer.js files. After uploading files to server create absolute urls. Here are some samples:
  

  • https://webslider.io/slider-files/3c531cab-e5f2-476c-b225-eb2780e094bd/slider.json
  • https://webslider.io/slider-files/3c531cab-e5f2-476c-b225-eb2780e094bd/wsslider/wsslider.json

Integration using Bucket

Steps to get integration urls

• Open Publish panel
  
• Use Player URL and Slider URL for integration.

Connect with website or app

In previous section we have learned how to get Player URL and SLider URL.

Here we will got step by step to describe embedding project in our website.

• Replace [WSPLAYER_URL] with real url and add following code to head section of webpage.

<script src="[WSPLAYER_URL]"></script>

• Replace [SLIDER_URL] with real url and add following code to place where project should appear.

<div id="ws-project"></div>
<script>
  window.addEventListener("load", async function () {
    const data = await fetch("[SLIDER_URL]").then((data) => data.json());
    const player = new window.WebSliderPlayer(
      data,
      document.getElementById("ws-project")
    );
    player.play();
  });
</script>

Platform specific integrations

React

To integrate project into react app use webslider-react package.