Startup and appsettings.json:

Add services.AddFotowarePlugin(); into your startup.cs

```
public void ConfigureServices(IServiceCollection services)

{
       //at the end

   services.AddFotowarePlugin();

}

```

```

"Fotoware": {

   <!-- all these data is to be obtained from Fotoware -->

   <!-- Documentation ClientId and Secret for Selection widget https://learn.fotoware.com/Integrati..._authorization -->

   "ClientId": "[Enter your Fotoware guid]",

   "ClientSecret": "[Enter your client secret string]",
   
   <!-- Documentation for ServerApi ClientID and Secret https://learn.fotoware.com/Integrati...with_OAuth_2.0 -->

   "ServerApi": {

     "ClientId": "[Enter your Fotoware guid]",

     "ClientSecret": "[Enter your client secret string]"

   },

   <!-- Leave RedirectUri empty or remove if nothing else is told to you. Domain is not required in Optimizely multisite solution,

   example https://domain.com/*episerver*/Fotow...ation/callback 

   or use default /episserver/Fotoware.Veloz.Plugins.Optimizely/authentication/callback

   where *episerver* is depending on your configuration. CASE SENSITIVE, use LOWER CASE  -->

   "RedirectUri": "/episerver/Fotoware.Veloz.Plugins.Optimizely/authentication/callback",

   "TenantUrl": "https://my.fotoware.cloud",

   <!-- which asset folder to import images to -->

   "RootFolderId": "[Enter an id to a media folder in Optimizely where you want downloaded assets, for instance 218]",

   
   <!-- presets is used to predefine a width of an image to download, can be used with Fotoware:PreferredDownloadWidth, presets are defined in Fotoware -->

   "PresetUrl": "/fotoweb/me/presets/export/[your presets guid]",

   <!-- these are optional -->

   <!-- EnableOnAllImages default is "true" -->

   /*"EnableOnAllImages": "false",*/

   /* ExportWidgetEnableOnAllImages default is "true" */

   /*"ExportWidgetEnableOnAllImages": "false",*/

   /* DisableEpiserverDefaultMediaSelector default is "false" */

   /*"DisableEpiserverDefaultMediaSelector": "true",*/

   "AllowedTypes": ".jpg,.jpeg,.jpe,.gif,.bmp,.png,.gif,.psd",

   /* PreferredDownloadWidth is important to be same or less than the presets width to work, zero is default and will den take the default presets width */

   "PreferredDownloadWidth": "1600",

   /*  Refresh token valid for days, then user need to login again, default is 14 */

   "RefreshToken": {

     "ValidDays": "1"

   }

   /*"ArchiveUrlsToSynchronize": "/fotoware/archives/5000-Archive,/fotoware/archives/5000-Archive-2",*/  }

   "ImportOriginalSelection": true, //Add dropdown value "Import Original" selection on Image Property, will always download the original image thru the Download API, bypassing the presets.

   "DisableAssetPane": false,//disabling right click in asset panel folders

```

It is also possible to implement and register an instance of the IFotowareSettings (or extended IFotowareCommerceSettings) interface to take full control of all settings, for instance, configuring which metadata to synchronize.

Configuring additional settings

You need to implement the IFotowareMedia interface on a content type that inherits from the Optimizely ImageData class in your solution. This will enable additional fields used by the add-on to keep assets in sync with the originals in Fotoware.

(The FotowareModifiedDate property is used to track when the asset was last changed in Fotoware. 

Note: An update to the metadata of an asset in Fotoware only adds 2 seconds to the modified date; therefore, we need to keep track of this date and time.

Add to your Tiny MCE configuration toolbar

The button is automatically plugged into Tiny MCE. If it doesn't show up, you probably already have a custom configuration. In startup.cs, add **fotoware-insert-media** to your toolbar.

Decorate your Optimizely Property with the Fotoware UIHint attribute:

This will replace Optimizely's built-in image editor with an extended editor that supports selecting images from Fotoware and local Optimizely images.

To disable the option to select local images in Optimizely, you can add another attribute to your property:

**FotowareConfigurationAttribute** is introduced in version 2. 
`[FotowareConfiguration(DisableDefaultEpiserverMedia = true, ExportWidgetEnabled = WidgetStatus.Disabled, /* only with XhtmlString, will use the export url from fotoware direct, instead of downloading the asset to Optimizely */ UseExportUrlOnly = false, QueryParameters = "crop=false&enhance=false&caption=false&action=false&publication=false&behaviour=false")]`

The attribute should be used in combination with FotowareUiHint. The parameters are documented here Integrati...gets#section_7.

Scheduled jobs

There are 2 jobs:

• **Fotoware - Synchronize assets**: Normally enabled if you want to sync updates from Fotoware to Optimizely. This job will only update assets if the assets have been updated in Fotoware.
• **Fotoware - Synchronize assets - Force**: As above, but will always download the latest image and metadata. Only to be run manually if needed.

![Fotoware_episerve_syncjob.png](/.attachments/Fotoware_episerve_syncjob-a9816ccc-4613-4afb-aebb-17102f7d6ce9.png)

Synchronizing metadata from Fotoware to Optimizely

The add-on supports synchronizing metadata between Fotoware and Optimizely through a mapping schema defined in your implementation of the **IFotowareSettings** interface. Implement your own **IFotowareSettings** and define the mapping schema for metadata that you want to get into the Optimizely assets.
Note: Some default metadata is included in Fotoware, but this can be extended for each client. 

The default mapping schema is set up as follows:

The mapping schema has keys that match the metadata names in Fotoware, and the value is the property name in Optimizely.
Note: The types need to be the same when changing the configuration; for instance, Photographers is a list of strings. 

You can find the default keys here: Fotoware_...MP_field_codes

The following example shows how to add custom metadata to the synchronization:

Controlling the structure of downloaded assets in Optimizely [Optional]

Since Fotoware stores assets in a flat list and Optimizely uses a hierarchical structure, assets imported to Optimizely are placed in a folder structure. This helps when browsing the imported assets and avoids a long list of assets in the same folder, which Optimizely does not handle well. It is possible to manage the folder structure for assets in Optimizely. By default, folders are created based on the year and month the asset was imported into Optimizely, but you can use other structures, for instance, based on metadata in the solution.

This is achieved by implementing the **IFolderResolver** interface.

If you want to save the image to "For this page", register this in startup.

services.AddScoped<IFolderResolver, ForThisPageFolderResolver>();

Customize Tiny MCE HTML template [Optional]

You can implement your own input HTML when inserting in Tiny MCE, for example, by filling the alt-text or adding some CSS classes. 

This is done by implementing and registering an implementation of **IFotowareTinyMceTemplateResolver** where you override GetHtml(ContentReference contentReference, string insertingToContentReference=null).

Event handling with Fotoware events

Available events are:

• OnImageDownloading: Raised before downloading an asset with the possibility to cancel the action.
• OnImageDownloaded: Raised after the asset has been downloaded.
• OnImageDeleted: Raised in the synchronization job when an asset is deleted or revoked in Fotoware.

The following example shows how to register event handlers for these events in an InitializationModule:

Disabling the Fotoware plugin in the Optimizely Commerce Asset list

Implement and register IFotowareCommerceSettings.PreventCommerceEditorIntegration.

By default, this is enabled.

Logging Fotoware.Veloz.Plugins.Optimizely

The add-on has some logging information that can be used for information and debugging the integration. 

Extras: code samples

In the NuGet package under Tools, you can find some code samples of IFolderResolver, IFotowareSettings, and IFotowareTinyMceTemplateResolver implementations, as well as additional scheduled jobs for synchronizing entire archives from Fotoware.

Troubleshooting

Tip: Turn on Logging Fotoware.Veloz.Plugins.Optimizely.

Multi-site configuration

Starting with version 3.5, you can have separate Fotoware instances for different sites in Optimizely.
You must implement the IFotowareConfig interface. 

Example: For each site

It will revert to the default IFotowareSettings set globally if siteid is not found.

Known issues

An error occurred when sending the request - This is probably due to the handshake with the endpoint not working. Make sure you use Tls12. 

Note: The callback URL is case-sensitive. Check your URL. Best practice is to use lowercase. 

Fotoware Optimizely/Episerver Plugin Change Log 

### 1.0.0 - May 2026

Update: targeting .NET 10 and Optimizely CMS 13 

1. The admin URL might have changed. Update the Site Configuration > Integrations > Callback URL in Fotoware Veloz to the new URL, for instance, https://domain.com/*optimizely*/fotoware.veloz.plugins.optimizely/authentication/callback, where optimizely depends on your configuration. This is case-sensitive; use lowercase. 
2. Replace all Fotoware.Plugins.Optimizely namespaces and references with Fotoware.Veloz.Plugins.Optimizely in your solution.