Important


Since Episerver is a complex enterprise CMS, we do not offer an out of the box integration that can be used immediately after installing our plugin.

A developer needs comprehensive knowledge in Episerver and programming know-how to make the Canto Episerver Connector work!


However, the provided NuGet package and our sample files offer all tools necessary to integrate Canto into Episerver.


Our Connector supports Episerver CMS and Commerce starting with version 11.11.2 onwards.


Installation


The Canto Episerver Connector is a protected module, packaged as a NuGet file to make the initial installation and configuration easier.

The package can be downloaded here: https://team.canto.com/b/KK7EM


Store it locally on your file system and add a Package Source in Visual Studio to install the package to your Episerver site.



Select the Episerver website project and add the Canto NuGet package.



Configuration


After installing NuGet, you will notice a new menu called Canto in your Episerver website.



The sub-tab Portal shows the Canto Main Library embedded as an iframe within in the Episerver UI.

In the sub-tab Configuration you handle the initial configuration necessary for the Canto Connector.


The required App ID and App Secret to connect your Episerver CMS with your Canto DAM can be created in your Canto account under Settings > Configuration Options > API Keys.



Once you have created your API keys, enter all details in Episerver under Configuration:



Save the configuration. 

This will save it in the Episerver database as Dynamic Data Store.


Click on the Click to Authenticate link to redirect to the Canto OAuth authentication page.



Enter your Canto account credentials:

  • Tenant ID: This is the first part of your Canto account URL. For https://XXX.canto.global it would be XXX
  • Email: Your Canto account username / email address
  • Password: You Canto account password


Click Sign In and allow access.


After a successful authentication you will be redirected to the Episerver Configuration page.



This will generate the access token and refresh token with an expiry date and store them in Episerver Dynamic Data Store. 

If the token expires it will automatically be refreshed and a new token will be saved on the next request.


Do not use the Refresh button unless you are experiencing issues!

It will clear the Episerver cache and reload all Canto assets again.

Only use it when uploaded assets in Canto do not appear in Episerver.


How to use


Canto Main Library


Canto users can access their Canto Main Library within the Episerver UI without the need to visit Canto in a separate browser.

To do so, go to Canto > Portal from within your Episerver CMS.



Canto Media Asset Pane


To access your Canto assets within Episerver CMS you can use the Canto Media Asset Pane while editing one of your CMS pages.

To do so, go to CMS > Edit  and select the Canto tab in the pane on the right.



Canto asset will be loaded on demand when you navigate to any of your Canto folders and albums. 

Note: Only assets with an "Approved" status in Canto will be seen within the Episerver Connector!


No assets are stored in the Episerver database! Only references are stored as part of Episerver Canto Content Provider.


The editor can drag and drop assets from the Canto Asset Pane to Episerver Image, Content Area etc. as shown below to build carousels, sliders or galleries.



Below is a Home Page preview which shows that the top hero image comes from Canto.



Sample code and files


Below are some code snippets for Episerver developers as a reference.


@Url.CantoUrl helper use to generate url for different types of canto assets like image, document, video, audio etc.

@model CantoAsset


@if (Model.Scheme == "video") //render video

{

    <video controls height="150" width="240">

        <source src="@Url.CantoUrl(Model.Url.Play)" type="video/mp4" />

        Your browser does not support the video tag.

    </video>

    <br />@Model.Name


}

else if (Model.Scheme == "audio") //render audio

{

    <audio controls width="240">

        <source src="@Url.CantoUrl(Model.Url.Play)" type="audio/mpeg">

        Your browser does not support the audio element.

    </audio><br />@Model.Name


}

else if (Model.Scheme == "document") //render documents

{

    <a href="@Url.CantoUrl(Model.Url.Download)"><img src="@Url.CantoUrl(Model.Url.Preview)" height="150" width="240"/><br />@Model.Name</a>

}

Else //render image

{

    <img src="@Url.CantoUrl(Model.Url.Preview)" height="150" width="240"/><br />@Model.Name

}


Some additional helpers.


@Url.CantoUrl(string internalUrl);

   

@Url.CantoUrl(ContentReference contentReference, CantoUrlType cantoUrlType = CantoUrlType.Preview);

   

@Url.CantoUrl(Url url, CantoUrlType cantoUrlType = CantoUrlType.Preview);

   

@Url.CantoUrlAdvance(ContentReference contentReference, string resize = null, string crop = null);

      

@Url.CantoUrlAdvance(Url url, string resize = null, string crop = null);


A sample website + database can be downloaded here: https://team.canto.com/b/HPC8A

It contains the demo site we have created to showcase the Canto Episerver Connector.