adori-web-sdk

Adori Youtube button SDK

Live Demo

Quickstart

The Adori YouTube button can be added to any page by installing the SDK and adding placeholders to the page for the share buttons.

Step 1: Add the Adori Share SDK

<script
  async
  defer
  src="https://adori.github.io/adori-web-sdk/js/adori.min.js"
  type="text/javascript"
  data-adori-key="YourAdoriWidgetKey"
></script>

The script tag supports the following data attributes

parameter	Description	Required
data-adori-key	The key assigned to you by Adori.	NO

Note: AdoriKey is disabled temporarily, you can choose to omit “data-adori-key” attribute in the script

Step 2: Add a placeholder for the Adori Share Button

<div class="adori-share"></div>

Note that the class must be set to “adori-share”

If you want to add the feedUrl dynamically add this below js

const element = document.getElementsByClassName('adori-share')[0]
element.setAttribute('data-feed-url', 'http://ggole.to/your.mp3')
window.adori.render(element)

If you want to hide Adori share button on invalid Urls than add below js

const element = document.getElementsByClassName('adori-share')[0]
element.removeAttribute('data-feed-url')
window.adori.render(element)

Note: Make sure to run this above code whenever feedUrl changes or available.

The placeholder tag supports the following data attributes

parameter	Description	Required
data-feed-url	The url of the feed is should be added here dynamically, this supports only feed urls not mp3	YES

Single Page Apps

By following the Quickstart guide, the Adori Youtube Button SDK will automatically inject the share button into all of the placeholders on the page after the DOM is ready. For single page apps, it’s common for the Adori share placeholder HTML to be added to the page dynamically in response to certain conditions (user navigates to a specific route, opens a modal, etc.). In this case, the placeholders might not exist when the injection script runs and as a result the Adori share buttons might not render.

Once the sdk is downloaded, it adds a global variable window.adori to your page. The Adori object contains the following properties:

adori.render(containerIdOrElement)

Argument	Description	Required
DomElement or ElementRef	Reference to the placeholder element	YES

For example, a Adori share button can be injected into a Vue component as follows:

<template>
  <div>
	  <button @click="showAdoriShare">Show button</button>
	  <div ref="adori" class="adori-share"></div>
  </div>
</template>

<script>
  export default {
	  methods: {
		  showAdoriShare(){
			  const ref: any = this.$refs.adori
    		  const youtube: any = window
    		  ref.setAttribute('data-feed-url', 'google.com')
    		  youtube.adori.render(ref)
		  }
		  hideAdoriShare(){
			  const ref: any = this.$refs.adori
    		  const youtube: any = window
    		  ref.removeAttribute('data-feed-url')
    		  youtube.adori.render(ref)
		  }
	  }
  }
<script>

Note: Call hideAdoriShare method to hide the the Adori share button