<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=442498563201411&amp;ev=PageView&amp;noscript=1">

Connector for Video: How to Use In-Page Configuration or ArticleIDs

img-integrations-other
Topics: Connector · Videos
Experience Level: Advanced
April 28, 2019 · 7 min read

 

 

 

 

 

If you have read other articles in this series, you will have seen the term ‘In-Page Configuration’ mentioned on multiple occasions. In this section, we will discuss what that is and how it can be used in its simplest form.

While the easiest way to get started is by using the Connector Admin Interface, In-Page Configuration offers more fine-grained control and additional features to fit the specific needs of your integration.

What does it mean in a nutshell? We are going to mark which articles to apply purchasing options to using the ArticleID, rather than the direct URL.

If you are comfortable working with code, this is a useful tactic for when you have a large - or growing - number of articles to which you want to apply the same purchasing option. You are going to need to get into modify the code of your site, however, much in the same way that you add the Connector script to the webpage.

 

First, check out our  video tutorial to see this in action: https://youtu.be/G62VoQaDc1M

 

 

Associating a video with an articleID happens in the laterpayConnector section of the video. Since we are using JWPlayer in this guide, we will illustrate it on a typical JWPlayer code example:

 

<script type="text/javascript">

           jwplayer('video-container').setup({

               width: '1020',

               height: '700',

               file: 'https://laterpayvideo.wpengine.com/wp-content/uploads/2018/08/surfer.mp4',

               laterpayConnector: {

                   articleId: 'Single_Purchase_Video',

                   video: {

                       mode: 'sell-video'

                   }

               }

           })

</script>


 

Note: This code needs to be added to the <head> section of the code and put in before the Connector script.

 

 

Connector Video 5-1

Figure 1: Inserting the Code Snippet Above the Connector Script 

 

This is a notation which enables us to define some in-page configurations which will apply to that video only. For the purposes of our example, we named the ArticleID “Single_Purchase_Video” - and after we add a new one “Sports_Subscription” - but you can create names of your own, just be sure to change the source code and use that ArticleID when creating the new subscription or Time Pass.

We can now create a purchasing option and link it to this ArticleID. First, go back to the Connector dashboard and create a new single purchase to bring up the new purchase dialog window. The same rules will apply as before - we will just be changing the referencing logic. So, select ArticleID and input the name of the ArticleID defined in the snippet - in our case above that is “Single_Purchase_Video”. Finally, we can define the price as 50 cents, pay later.

 

Connector Video 5-2

Figure 2: Adding the ArticleID

 

Connector Video 5-3

Figure 3: The Updated Overlay

 

As you saw in the video, this results in a single purchase defined on the sample video. The question is, why did we take the ArticleID route at all? Why don’t we always define a number of videos you want to sell by individually listing them on a configuration interface?

You can, of course, take that approach - it is entirely up to you. As a general rule, if you feel comfortable with editing code, and you have a larger or a growing number of videos, you might want to take the ArticleID route, but ultimately you can choose whichever method is more convenient for you.

Let’s take a look at an example. As you saw in the video, taking a video from the “Sports” category and assigning the same ArticleID to it will lead to the defined individual purchase option being applied to it as well. It’s as simple as that! It may not make much of a difference if you only have a few videos to work with, but imagine if you have tens, or even hundreds, of videos to which you want to apply the same purchasing option - this should give you an idea of which configuration route is most appropriate for your content.

It’s important to remember that you can use this approach for all the purchasing options - even for subscriptions and timepasses. All you need to do is to add a purchasing option and then reference the videos via the ArticleID. In addition, each video can have multiple IDs, you just need to add them in an array, like this:

 

<script type="text/javascript">
           jwplayer('video-container').setup({
               width: '1020',
               height: '700',
               file: 'https://laterpayvideo.wpengine.com/wp-content/uploads/2018/08/surfer.mp4',
               laterpayConnector: {
                   articleId: ['Single_Purchase_Video',Sports_Subscription],
                   video: {
                       mode: 'sell-video'
                   }
               }
           })
</script>

 

Then, by adding this new ID to our video, and referencing it in the newly created subscription (Sports_Subscription, for 2,50 EUR), we are able to define this subscription only for sports videos!

 


Further Reading

Developer Tools