The integration allows Web editors to directly access files and folders from Mediaflow inside the Optimizely 12 interface and embed images either in "on-page" editing, in blocks, or in the text editor (TinyMCE). The integration also allows the users to embed video from Mediaflow using Mediaflow’s media player.
The integration connects directly between the Optimizely 12 webserver and the Mediaflow servers, eliminating the need to download files locally first when mounting images.
To ensure performance and stability, mounted images are always copied to the web server (either under "Page Files" or "Global Files" in Optimizely 12). This means that your website is not dependent on Mediaflow and the integration does not affect the performance of regular page views. All mounted images remain in Optimizely and no changes to the site are required if you uninstall the integration.
Settings in Mediaflow
The integration with Optimizely can be used as soon as it is installed. However, for the files to be available and optimally used, administrators need to prepare the settings for them in Mediaflow first.
Install the integration
Step 1: Get NuGet packages
Mediaflow's integration is a standard NuGet installation. Optimizely has its own NuGet feed that needs to be added to find the plugin. Instructions on how to do this can be found here: https://nuget.optimizely.com/feed/.
Once the feed is added, you can search for the integration inside Visual Studio using Mediaflow.Optimizely.
For more information and the latest version, you can also visit Optimizely's page for the plugin here:https://nuget.optimizely.com/package/?id=Mediaflow.Optimizely.
Step 2: Install the NuGet package
Use Optimizely’s standard NuGet installation process.
Step3: Configure the integration
All configuration of the integration is done in appsettings.json and Startup.cs where you need to add three sections for the integration to work correctly. Firstly you need to add a Mediaflow section in appsettings.json. In the section you need to enter your key. There are also some selectable options that can be used to customise the integration to what suits you best.
Key
The key is your Mediaflow key which is required for the connection to Mediaflow to work. The Mediaflow key can be found in Mediaflow in the integration settings for the Optimizely integration.
https://app.mediaflow.com/settings/integrations
You need to have the correct permissions to view the integration settings. If they are not available, you can enter superadmin mode or contact a Mediaflow administrator in your organisation.
LimitEmbedType
Controls how video is embedded from Mediaflow. The video can embedded either as a standard iframe or as inline JavaScript. If this parameter is specified, only the selected option will be available to the user. If no parameter is specified the user will have the option to chose both. JavaScript is recommended as it has the highest compatibility with Mediaflow's accessibility features.
Possible values
-
javascript
Only allows the user to embedd video using inline Javascript.
-
iframe
Only allows the user to embedd video using a standard iframe.
Note:
The video will always be embedded in an iframe in the TinyMCE editor since it dosen’t support inline Javascript.
ForceAltText
Controls whether the alt-text field must be filled in before the user can mount an image.
Possible values
-
true
The alt-text field cannot be empty, meaning it is mandatory to add an alt text.
SaveLocation
Controls whether images should be saved to the page's own media folder instead of in a global folder called "Mediaflow" in Optimizely's Media section. Note that the images are always copied to the website's web server.
Possible values
-
page
All images be saved to the media folder of the current page being edited.
Step 4: Active the integration
In the same file, add configuration to activate the integration if there is no configuration already to automatically find modules
Mediaflow is not open to all groups in Optimizely to restrict access and prevent unauthorized access to Mediaflow. Allowed groups include CmsAdmin, WebAdmins, Administrators, and the group "Mediaflow," which can be added to grant members access to Mediaflow.
Use Mediaflow integration in TinyMCE (optional)
If you want support for Mediaflow in TinyMCE, you need to add configuration to Startup.cs:

Using the Mediaflow file picker as a separate property (optional)
To use the Mediaflow selector as a separate property, you can add it to the current model as "MediaflowObject" as shown in the example below:
From MediaflowPicker, you can then retrieve information about the selected media, whether it is an image or video, as well as metadata such as width, height, Mediaflow ID, alt text, etc.
Below is a simple example of how to display an image or video based on type:
Using MediaflowPicker in lists (optional)
Optimizely recommends putting complex properties in blocks within a ContentArea. This is also what we recommend and can be achieved by the code example below:
Segment content using role mapping (optional)
By default, all users in Optimizely 12 can access the same shared content when mounting images from Mediaflow on the website. If you have multiple groups of web editors working on different parts of the site, there may be a need to segment the content. This means that the users will have access to different content based on which group they belong to. This can be achieved through the Virtual Role feature in Optimizely.
Note
To do this, a unique authentication key in Mediaflow is required for each group. Please note that this may be associated with a cost depending on your agreement.
In appsettings.json, you link a role in Optimizely to a custom key, which, in turn, is linked to a group in Mediaflow where access to folders can be restricted. It is also possible to specify a wildcard where all users who do not belong to a group/Virtual Role see the same content.
Example: