Videos and well executed webinars are key tools in achieving a higher engagement and conversion rate from your visitors and customers. TwentyThree is a powerful video hub and webinar service. I was lucky enough to get an account and access to their API and that escalated quickly into a prototype integration into Episerver.
Recently I had the pleasure of speaking at a webinar arranged by TwentyThree, to showcase how easily it can be integrated with an Episerver (Optimizely) based website and add lots of value.
Even though there already is an existing 3rd party integration, I wrote my own prototype integration as I was seeking different integration goals and also had some stability issues with the older integration.
Here is the link to the webinar https://video.twentythree.net/episerver-video-personalisering, but be aware - it's in Danish.
Below I'll try to describe some of the integration points and how I have approached them. My plan is to make a more productized version of the integration available on the Episerver Marketplace. Please leave me a message if you're interested in learning more about that.
Architecture
The old integration used the ContentProvider approach of integrating - where content remains at the external source, but is exposed to Episerver as if it is content in Episerver. That is an extremely powerful approach to integration that I have argued strongly for in the past. While I still love the power of content providers, a downside is that they are pretty complex and it takes a lot of effort to build them in a way where they both perform and feel robust and resilient - which are exactly some of the elements that I experienced was missing from the existing integration. And - for what I really wanted to achieve here, it feels a bit like overkill. We don't need full, realtime read/write support for the videos and webinars. TwentyThree provides a really well-built UI for managing all that - so the approach I've taken here is instead to embed their UI and make it easy to find and embed videos and webinars on your website - and this is much more easily achived using replication.
Luckily TwentyThree also support webhooks, so it's pretty straightforward to simply configure Episerver to wait webhooks calls and then fetch a new copy of the video or webinar in near-realtime. And by replicating content, I don't have to worry about a live site crashing or becoming slow due to a faulty API connection. Everything I need is right here in Episerver.
Finding and embedding videos on your website
To make it easy to find videos, I had to do a few things. First of all, of course, I make sure that placeholders for the video embed code is replicated into Episervers media library. Note, I didn't replicate the actual binary video code as I'd still want to use the embedding and streaming functionality of TwentyThree - but replicate their metadata into a nice placeholder - in a tree structure based on the TwentyThree categories.
Notice how there's also a folder for the webinars - however they are imported as blocks, and not as media.
It should also be possible to benefit from the free text search in TwentyThree, and that's easily fixed by plugging in a SearchProvider in Episerver.
Since the videos are basically just media assets they are easy to use through drag-and-drop all over Episerver, but in case a specific player (or player settings) would be needed, I also created a player block that the videos can be wrapped in:
Recommending and promoting videos
As you see above, I got a bit carried away and also made a block that will dynamically list all the promoted videos in a control on your site like this:
(A small personal note: My dog, Laika, recently had puppies, which luckily make a great example video case)
To see details like if a video is promoted or not, you can of course check out all the metadata replicated from TwentyThree directly in the forms edit mode of a video asset.
Displaying video insights
For some of the other video insights, I decided to simply fallback to the efficient UI provided by TwentyThree, but embedding it where it felt naturally in Episervers Edit mode. Note that this requires you to have your twentythree video url and episerver site url to be below the same main host name.
I exposed the views through the View context menu, like this functionality to create action links inside the video.
In some of the views though, it made sense to show compile my own view of things - for example I thought it would be nice to see some aggregated video details along with key frames throughout the video to make video selection easier:
Supporting comments and ratings
Much like Youtube, TwentyThree supports comments and ratings on videos.
Since this is 'only' a prototype I'm not all the way there yet, but I do think that a neat way would be to use the power of Episerver Forms to collect comments (and potentially also ratings) from a video. Here is a mockup that can show and accept comments I'm working on:
Promote webinars
I'm a big fan of the way TwentyThree does webinars. It really is the full package - from a professional level webinar broadcast system to everything around handling sign-ups, conversions, follow-up emails, activity and engagement tracking and so on. So it's really key to make it easy for Editors to use the webinars straight in Episerver.
As I wrote earlier, webinars are exposed simply as blocks with meta information right now, that can bring visitors to a sign-up page.
Dragging a webinar into a content area could for example look like this:
But again - the moment you go to the back-end, an embedded UI will show you important information - for example how it's going with the signups to the webinar:
Showing upcoming webinars
Much like with promoted videos, it seems logical that you'd often want editors to showcase a list of upcoming webinars that dynamically updates itself. And of course that's just as easy to achieve:
The webinars could potentially be embedded on the site as well - but for the best viewing experience I've so far choosen to just provide links to the main TwentyThree webinar page.
Personalizating video content
Finally, when you work with an Episerver based website you want to personalize it as much as possible in order to increase conversion rates.
A nice approach to achieve this is to simply use visitor groups. But it would make a lot of sense if you could target information to your visitors based on their twenty-three interaction. For example, which videos did they watch? Did they already signup to a webinar? How much information have we collected through the 'Collectors' functionality in TwentyThree and much more.
So - it's still work-in-progress, but I've started adding some criteria for the visitor groups:
And using them is as easy as always:
If you are interested in learning more about how to integrate TwentyThree Video and Webinars with Episerver CMS, feel free to reach out.
Recent posts