Salesforce Marketing Cloud App

Overview

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

SFMC 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

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. 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:

Create an upload preset

Some of the advanced functionality of the 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 editing controls. When you are happy with your edits, click Apply.

    Image editor
  5. You can also resize the image without cropping using the Scale Image controls in the Content tab.
  6. If you want your customers to be able to click on the image to link out, enter the web address in Image Link.
  7. 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 six 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

Commonly-used Media Library features

The Media Library opens when you click Choose Image in the content tab, or by clicking the folder icon if you have already selected your image, 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.

Advanced search

The advanced search 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.

Media Library advanced search

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

Collections

Collections are ad-hoc groupings of images. Images can be added to and from collections without affecting or moving the image itself, and images 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.

Collections can often be a convenient way to group all images that you might want to use on a particular project or campaign. You can access collections from the Navigation button at the top left of the Media Library.

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, you can also add or edit tags and other metadata after images are uploaded via the embedded Media Library, and even set the same tags or metadata on multiple images 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.

Media library asset management

Tip
From the Asset management page, you can also select to insert 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 return to the content block that will show your transformed asset. 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.

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: