# HTML

The steps below will integrate ParOne into your existing website with HTML.

# ParOne's demo site

You can view a wordpress version of our players here: https://wordpress.parone.com (opens new window)

This site will show you examples of the different style of players.

# Integrating ParOne

# Step 1

Include the ParOne SDK script tag in your website's <head> section.

<head>
    <script src="https://sdk.parone.io/parone.js"></script>
</head>

# Step 2

Insert the ParOne video player tag into your site's <body> section. Replace YOUR_FEED_ID with your FeedID, and the CAMPAIGN_ID with a campaign ID from the JSON or RSS feed. Please see the corresponding entry in Player Types for examples specific to the component you are using.

<body>
    <parone-video-block campaign="CAMPAIGN_ID" feed="YOUR_FEED_ID">
</body>

TIP


If you're using a test feed throughout development, env="stage" to use our staging server.

<body>
    <parone-video-block campaign="CAMPAIGN_ID" feed="TEST_FEED_ID" env="stage">
</body>



# Setting up Dynamic pages

This is used for Carousels where a user will click a thumbnail and then load a seperate page to load the video itself. This is useful for those websites that integrate advertisements and want additional click throughs.

IMPORTANT

  • This step is only required if you want to use the Thumbnail Carousels.
  • This will be used for dynamic pages like "https://yoursite.com/parone/123" where "123" is the ID for a particular video campaign.

Create a page with the permalink "parone" in your site, and add <parone-video-block> tag somewhere on the page. Also include whatever other content on the page you would like.

The url is going to be /parone/campaign_id, so you need to extract the campaign id from the url. The feed_id, env, and style variables can be encoded directly into the template. The styles tag can be generated using our Style Editor.

Below is some example code.

  • PHP
// This get_query_var call is an example piece of code. 
// env=\"{$environment}\" will need to be used if using our staging server 


function parone_video_player() {
  $campaign = get_query_var('parone_campaign_id') 
  $html = "<parone-video-block "
  $html .= ":feed=\"$feed\" campaign=\"$campaign\" styles='$styles'>"
  $html .= "</parone-video-block>"
	return $html
}

# Frameworks

# React.js

If you are using a framework such as React you can still use our SDK using the same steps as above.

React requires no further customization, although it is generally recommended to wrap WebComponents in a wrapper React component.

# Vue.js

If you are using a framework such as Vue you can still use our SDK using the same steps as above.

The below code setting is helpful so that Vue does not throw a warning regarding an unknown element.

Vue.config.ignoredElements = ["name-of-parone-block-used"]
Last Updated: 10/10/2021, 3:19:20 PM