Salesforce Marketing Cloud App

Overview

Salesforce Marketing Cloud is a provider of digital marketing automation and analytics software and services. Cloudinary offers a Salesforce Marketing Cloud (SFMC) app that enables you to embed images and videos (as animated GIFs) from your Cloudinary account into email campaigns and websites. The Cloudinary custom content blocks allow you to transform, optimize, and deliver your media to meet the performance and design needs of your digital marketing campaigns.

SFMC image block video tutorial

To get an idea of the functionality provided by Cloudinary's Salesforce Marketing Cloud app, watch the following video that covers:

Jump to this spot in the video  0:00 An overview of the app
Jump to this spot in the video  0:37 Installation and configuration information
Jump to this spot in the video  3:24 Editing images used in SFMC campaigns
Jump to this spot in the video  5:14 Adding overlays to images in SFMC

See also the Video to GIF block video tutorial.

Installation and configuration

Install and configure the app

To install Cloudinary's app for SFMC and configure it to connect to your Cloudinary account:

  1. In your SFMC dashboard, navigate to Settings > Setup, then click Apps > Installed Packages.
  2. Click New and enter a name and description for the package.
  3. For the Cloudinary image block, click the package you created, then Add Component.
  4. Select Custom Content Block, then Next.
  5. Set the name, for example Cloudinary Image, and optionally add a description.
  6. Set the Endpoint URL to:
    • https://sfmc-contentbuilder.cloudinary.com/web-image?cloudName=<cloud_name>&apiKey=<api_key>

      Replace <cloud_name> and <api_key> with the values from the Account Details section of your Cloudinary console.

      Other configuration parameters you can add are:

      • cname=<custom_domain> if you have your own custom domain set up for your account.
      • pCdn=true if you have a private CDN.
      • apiCname=<api_endpoint> if you use an alternative endpoint, for example api-eu.cloudinary.com. The default is api.cloudinary.com.

  7. For the Cloudinary video to GIF block, in the package you created, click Add Component.
  8. Select Custom Content Block, then Next.
  9. Set the name, for example Cloudinary Video to GIF, and optionally add a description.
  10. Set the Endpoint URL to:
    • https://sfmc-contentbuilder.cloudinary.com/video-2-gif?cloudName=<cloud_name>&apiKey=<api_key>

      Replace <cloud_name> and <api_key> with the values from the Account Details section of your Cloudinary console.

      Other configuration parameters you can add are:

      • cname=<custom_domain> if you have your own custom domain set up for your account.
      • pCdn=true if you have a private CDN.
      • apiCname=<api_endpoint> if you use an alternative endpoint, for example api-eu.cloudinary.com. The default is api.cloudinary.com.

Create an upload preset

Some of the advanced functionality of the image content block requires SVG files to be uploaded to your Cloudinary account. To enable this functionality, create an upload preset in your Cloudinary account as follows:

Note
Only accounts assigned a role of Cloudinary Admin or Master admin can create an upload preset.

  1. Log in to your Cloudinary account.
  2. Click Settings and select the Upload tab.
  3. Scroll down to Upload presets and click Add upload preset.
  4. In Upload preset name enter sfmc_preset.
  5. In Signing Mode select Unsigned.
  6. In Folder enter CLD_SFMC_INT_DONT_DELETE.
  7. Click Media analysis and AI.
  8. In Tags enter sfmc_int.
  9. Click Save.

Upload preset settings

After applying overlays in a content block you will notice a folder in your Media Library called CLD_SFMC_INT_DONT_DELETE. Ensure that this folder and its contents are not deleted, moved or modified in any way as this may result in your campaigns failing to load images.

Cloudinary Image content block

The Cloudinary Image content block is available within SFMC wherever content blocks can be used, for example in Content Builder, when creating an email or in Web Studio, when creating a web page.

Note
If, during the Cloudinary integration setup, you set the name to anything other than Cloudinary Image, the block will appear with that name.

Cloudinary Image Block

When creating content, you can see the Cloudinary Image block in the Custom section of the Blocks tab. Add the block to your email or web page by dragging it to the required location. The block settings open automatically to let you choose and configure your image.

Content tab

The Content tab provides commonly used functionality such as choosing and editing images and setting alt text and links.

Cloudinary Image Block Configuration

In the Content tab:

  1. Click Choose Image to select an image from your Cloudinary Media Library. The Media Library opens in a new browser tab and you may be prompted to log in if you are not already logged in to your Cloudinary account.
  2. Select an image and click Insert.

    Media Library selection
    The image appears in the Content tab and also in your design.
  3. Enter a description of the image in the Image alt text field.

    Content block configuration
  4. If you want to edit the image, for example to crop it or rotate it, click Edit Image to bring up the Media Editor. When you are happy with your edits, click Apply.
    Note
    The Media Editor does not support animated images.
    Image editor
  5. To resize the image, without cropping, use the Scale Image controls in the Content tab.
    Note
    The image may have already been scaled down automatically to ensure it is not too large for the template. This is reflected in the initial dimensions shown in the Scale Image controls.
  6. Align the image to the left, center or right using the Image Alignment controls. The image is aligned respective to its container. The underlying template determines its placement within the resulting email.
  7. If you want your customers to be able to click on the image to link out, enter the web address in the Image Link field.
  8. If you are adding an image to a website, you can configure the settings under Image Optimizations. Select Enable Optimizations to:
    • Enable responsive images to deliver the best size for the user's viewport.
    • Set a placeholder image that is shown while the image is downloading.
      Note
      Do not configure these settings if you are using the content block in an email.

Advanced tab

Use the Advanced tab to personalize or customize the image with overlays and custom transformations.

In the Advanced tab:

  1. With Image and Text Overlay Editor selected, you can add up to twelve image or text layers on your image by clicking Add Text Box or Add Image.

    Overlays editor
    • You can position the overlays on the canvas by selecting and dragging them. You can resize the overlays using the resize handles.
    • For image overlays, you can change the opacity using the Image Opacity slider.
    • For text overlays, you can change the text, style, font, size, color and background in the text editor.

      Overlays layers editors
    • Each layer can be sent forwards or backwards, or can be deleted, using the icons in the top-right corner of each layer.

      Layers controls
    • You can align layers by first selecting the layer to align to, then selecting the layers to align (holding down the shift key), then choosing one of the positions from the Align menu.
    • When you are happy with your layers, click Apply.
  2. With Custom Transformations selected, you can enter any transformations in URL syntax that you want to apply to your image.
    • For example, to add a gray shadow, you can enter co_gray,e_shadow:50,x_-15,y_15.
    • Chained transformations are also valid, so, for example, you can add an improve effect to the first transformation by entering co_gray,e_shadow:50,x_-15,y_15/e_improve.

      Custom transformations

Cloudinary Video to GIF content block

The Cloudinary Video to GIF content block provides a simple way to add a video to your email campaigns. The video that you select from your Cloudinary media library is converted to an animated GIF for maximum compatibility with email clients. If you want to embed an existing animated image from your Cloudinary account, use the Cloudinary Image content block as explained in the second half of the Video to GIF block video tutorial.

Note
If, during the Cloudinary integration setup, you set the name to anything other than Cloudinary Video to GIF, the block will appear with that name.

Cloudinary Video to GIF Block

When creating content, you can see the Cloudinary Video to GIF block in the Custom section of the Blocks tab. Add the block to your email by dragging it to the required location. The block settings open automatically to let you choose and configure your video.

SFMC Video to GIF block video tutorial

This video shows how to:

Jump to this spot in the video  0:00 Use the Cloudinary Video to GIF content block to add a video as an animated GIF to your email template
Jump to this spot in the video  4:26 Use the Cloudinary Image content block to add an animated GIF with overlays to your email template

Content tab

The Content tab provides commonly used functionality such as choosing and trimming videos, scaling and alignment.

Cloudinary Video to GIF Block Configuration

In the Content tab:

  1. Click Choose Video to select a video from your Cloudinary Media Library. The Media Library opens in a new browser tab and you may be prompted to log in if you are not already logged in to your Cloudinary account.
  2. Select a video and click Insert.

    Media Library selection
    The video appears in the Content tab and also in your design. Depending on the size of the video, it may take some time to process before displaying in the design.
  3. In the current implementation, your video must not exceed 15 seconds, therefore, if it is longer than this, or if you want to use only a certain section of your video, click Trim Video to select the part of the video that you want to keep.

    Trim video
  4. Resize the video using the Scale controls in the Content tab.
  5. Align the animated GIF to the left, center or right using the Alignment controls. The GIF is aligned respective to its container. The underlying template determines its placement within the resulting email.
  6. If you want your customers to be able to click on the GIF to link out, enter the web address in the Link field.
  7. Enter a description of the video in the Alt Text field.

    Content block configuration

Advanced tab

Use the Advanced tab to apply custom transformations to the video.

In the Advanced tab:

  1. Enable Lossy compression to reduce the GIF's file size. This may result in a lower quality GIF.
  2. Enable Infinite looping to make the GIF repeat automatically.
  3. Set Quality to an automatic level, or choose the level manually. The lower the quality, the smaller the GIF's file size, but the greater the impact to the visual quality. Learn more about quality settings.
  4. You can transform your video further by specifying any video transformations in URL syntax in the Additional Transformations box.
    • For example, you could rotate your video using a_30.
    • Chained transformations are also valid, so, for example, you can also round the video's corners using a_30/r_20.

      Advanced settings

Commonly-used Media Library features

The Media Library opens when you click Choose Image or Choose Video in the content tabs, or by clicking the folder icon if you have already selected your image or video, as shown here:

Accessing the Media library from the content block

From there, you can access almost all of the same functionality that is available in the full Media Library in your Cloudinary account console.

Note
The Safari browser may require additional steps when logging in to the Media Library. If you encounter an issue, follow the prompts to log in separately and attempt to open the Media Library again. Alternatively, use one of the other recommended browsers when working with Cloudinary.

Advanced Search

The Advanced Search feature lets you search by filters such as tags, metadata, format, orientation, resolution, or (if supported for your account), even by image analysis characteristics, such as prominent colors, presence of faces, or image location.

Advanced Search

For more details, see Advanced Search in the Digital Asset Management guide.

Collections

Collections are ad-hoc groupings of assets. Assets can be added to and from collections without affecting or moving the asset itself, and assets can be included in multiple collections. You can create your own collections (assuming you have the required permissions) or other Cloudinary users can share collections with you. You can also share collections with external stakeholders by sending a URL to a dedicated collection webpage, which is available to those with a link during an optionally specified date range.

Collections can often be a convenient way to group all assets that you might want to use on a particular project or campaign.

Media Library collections

For more details, see Collection management in the Digital Asset Management guide.

Tagging and metadata

Assets that have tags and other metadata enable all Media Library users to better organize and search for assets in the Media Library.

In addition to the option to specify tags when you upload an image or video, you can also add or edit tags and other metadata after images and videos are uploaded via the embedded Media Library, and even set the same tags or metadata on multiple images and videos at once.

You can view and set this data using the Asset toolbar or in the Asset management page.

Asset toolbar

You can set tags and metadata for several selected assets at once from the main Media Library view using the Tag or Edit Metadata options in the asset toolbar. The type of metadata available for editing (contextual or structured) depends on the settings for your organization's account.

Media library asset toolbar

Asset management page

You can view or edit tags and metadata as well as view embedded image metadata for a specific asset from the Summary and Metadata tabs of the Asset management page.

To open the Asset management page either double-click the asset or select Manage from the asset's context (right-click) menu.

Asset management

Tip
From the Asset management page, you can also select a pre-defined transformation of the original asset (a 'Transformation Preset'), view or activate a variety of image analysis options in the Analysis tab, and more. For details, see Asset management drill-down in the Digital Asset Management Guide.

Media Editor

The Media Editor is only applicable to images and is accessible from the Asset management page, by clicking the Edit Image button.

Note
This provides similar functionality to the editor in the Content tab, but also allows you to update the original image stored in your account.

In the Media Editor, you can crop and resize your image to suit your design. If you save the modified image, your current asset will be overwritten. You can retrieve the original if you have backups enabled. Otherwise, you may prefer to download the modified image and upload it as a new asset.

Media library media editor

Transformation editor

The transformation editor is accessible from the Asset management page, by clicking the Transform button.

In the transformation editor you can apply, and preview various transformations, then click Insert to use this transformed asset as your media item. Unlike when using the Media Editor, your original asset remains unmodified.

Media library transformation editor

For more details, see Asset and transformation editing in the Digital Asset Management guide.

Known limitations

  • Restricted assets cannot be used in Cloudinary content blocks.

  • These file types cannot be edited in the Media Editor:

    Format Extension
    AI (Adobe Illustrator) .ai
    animated GIF .gif
    DjVu .djvu
    EPS (Encapsulated PostScript) .ps, .ept, .eps, .eps3
    FBX (Filmbox) .fbx
    FLIF (Free Lossless Image Format) .flif
    GIF .gif
    GLB (Binary glTF) .glb
    glTF (GL Transmission Format) .gltf
    ICO .ico
    InDesign .indd
    PDF .pdf
    PSD (PhotoShop Document) .psd
    Raw image files .arw, .cr2
    SVG .svg
    TARGA (Truevision TGA) .tga
    TIFF .tif, .tiff
    USDZ .usdz

Support

If you encounter issues using the Salesforce Marketing Cloud app, check to see if they are known issues and what workarounds are possible. You can also contact our support team, who are always happy to help.


Guide to Building the Ultimate E-Commerce Website

 
You may also want to take a look at Cloudinary's five-chapter Guide to Building the Ultimate E-Commerce Website. The guide includes suggestions by e-commerce and technical experts on how to build a versatile marketplace by selecting automated e-commerce and CMS platforms that help you create, modify, and deploy adaptable user experiences.

✔️ Feedback sent!

Rate this page: