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.
To get an idea of the functionality provided by Cloudinary's Salesforce Marketing Cloud app, watch the following video that covers:
|0:00||An overview of the app|
|0:37||Installation and configuration information|
|3:24||Editing images used in SFMC campaigns|
|5:14||Adding overlays to images in SFMC|
To install Cloudinary's app for SFMC and configure it to connect to your Cloudinary account:
- In your SFMC dashboard, navigate to Settings > Setup, then click Apps > Installed Packages.
- Click New and enter a name and description for the package.
- Click the package you created, then Add Component.
- Select Custom Content Block, then Next.
- Set the name, for example Cloudinary Image, and optionally add a description.
- Set the Endpoint URL to:
<api_key>with the values from the Account Details section of your Cloudinary console.
Other configuration parameters you can add are:
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:
- Log in to your Cloudinary account.
- Click Settings and select the Upload tab.
- Scroll down to Upload presets and click Add upload preset.
- In Upload preset name enter
- In Signing Mode select
- In Folder enter
- Click Media analysis and AI.
- In Tags enter
- Click Save.
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.
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.
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.
The Content tab provides commonly used functionality such as choosing and editing images and setting alt text and links.
In the Content tab:
- 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.
- Select an image and click Insert.
The image appears in the Content tab and also in your design.
- Enter a description of the image in the Image alt text field.
- 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.
- You can also resize the image without cropping using the Scale Image controls in the Content tab.
- If you want your customers to be able to click on the image to link out, enter the web address in Image Link.
- 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.NoteDo not configure these settings if you are using the content block in an email.
Use the Advanced tab to personalize or customize the image with overlays and custom transformations.
In the Advanced tab:
- 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.
- 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.
- Each layer can be sent forwards or backwards, or can be deleted, using the icons in the top-right corner of each layer.
- 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.
- 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
- Chained transformations are also valid, so, for example, you can add an
improveeffect to the first transformation by entering
- For example, to add a gray shadow, you can enter
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:
From there, you can access almost all of the same functionality that is available in the full Media Library in your Cloudinary account console.
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.
For more details, see Advanced search in the Digital Asset Management guide.
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.
For more details, see Collection management in the Digital Asset Management guide.
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.
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.
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.
The media editor is only applicable to images and is accessible from the Asset management page, by clicking the Edit Image button.
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.
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.
For more details, see Asset and transformation editing in the Digital Asset Management guide.
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.
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.