{"id":21901,"date":"2019-06-18T17:01:59","date_gmt":"2019-06-18T17:01:59","guid":{"rendered":"http:\/\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c"},"modified":"2024-05-26T06:26:05","modified_gmt":"2024-05-26T13:26:05","slug":"introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c","title":{"rendered":"Introducing the Cloudinary Integration With Salesforce Commerce Page Designer for B2C"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p><a href=\"https:\/\/www.thinkwithgoogle.com\/advertising-channels\/video\/video-purchase-funnel\/\">Recent studies<\/a> have shown that consumers are increasingly relying on online videos to shop around, learn about products, and make purchase decisions. Given that the online audience watches over 50% of videos on mobile devices, marketing through videos on <a href=\"https:\/\/cloudinary.com\/solutions\/ecommerce\">eCommerce<\/a> sites is a paramount strategy.<\/p>\n<p>We are thrilled to introduce a new integration of Cloudinary\u2019s capabilities into the <a href=\"https:\/\/www.salesforce.com\/company\/news-press\/stories\/2019\/06\/061719-yy\/\">Salesforce Commerce Cloud (SFCC) Page Designer for B2C<\/a>. SFCC powers some of the largest eCommerce sites; its Page Designer enables  marketers and designers to rapidly create and publish visually engaging content with no coding. Cloudinary\u2019s superior platform for media management, optimization, and delivery is being adopted by thousands of customers, including some of the world\u2019s biggest retail brands. With the Cloudinary-SFCC Page Designer integration, marketers can effortlessly add videos, beefing up visual storytelling in short order. In addition, by customizing the Cloudinary component (see the <a href=\"https:\/\/github.com\/cloudinary\/cloudinary_sfcc_pagedesigner\">published code<\/a>), developers can add management capabilities for rich media through Page Designer.<\/p>\n<p>See all that in action in the demo below, which was part of SFCC\u2019s early-access program. Not only are the videos optimized for fast loading on all  devices and browsers, you stand to gain five significant benefits.<\/p>\n<h2>Ease of Use and Reuse of Evolving Videos<\/h2>\n<p>Even though eCommerce videos are typically produced only once, visual designs of websites and apps are dynamic and frequently being updated. Thanks to Cloudinary\u2019s AI capability, the same video always works well in all layouts.<\/p>\n<p>The example below shows how AI autocrops the same video to fit several layouts. In all cases, the most important part of the scene remains in focus.<\/p>\n<style>\n@import url(https:\/\/fonts.googleapis.com\/css?family=Candal);\n\n\/*\nA super simple jQuery slider plugin\n\nTable of contents\n\n1.0 - Typography\n2.0 - Elements\n3.0 - Grid\n4.0 - Slider\n\t4.1 - Slider Nav\n*\/\n\n\n\/*\n1.0 - Typography\n*\/\n\nh1,\nh2 {\n    font-family: Candal, sans-serif;\n    line-height: 1.2;\n}\n\n\n\/*\n2.0 - Elements\n*\/\n\nimg {\n    max-width: 100%;\n    height: auto;\n}\n\n\n\/*\n3.0 - Grid\n*\/\n\n.grid {\n    max-width: 960px;\n    margin: auto;\n}\n\n\n\/*\n4.0 - Slider\n*\/\n\n.slider-box,\n.slider__item {\n    position: relative;\n}\n\n.slider {\n    overflow: hidden;\n}\n\n.slider__canvas {\n    transition: transform 0.5s;\n}\n\n.slider__item {\n    float: left;\n}\n\n.slider__item__title {\n    opacity: 0;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 70%;\n    margin: 0;\n    color: #468;\n    font-size: 2.5rem;\n    line-height: 1;\n    text-align: center;\n    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);\n    transition: opacity 0.3s, transform 0.3s;\n    transform: translate3d(-50%, -60%, 0);\n}\n\n.active .slider__item__title {\n    opacity: 1;\n    transition-delay: 0.5s;\n    transform: translate3d(-50%, -50%, 0);\n}\n\n@media(min-width: 48rem) {\n    .slider__item__title {\n        font-size: 5rem;\n    }\n}\n\n\n\/*\n4.1 - Slider Nav\n*\/\n\n.slider-nav {\n    color: #fff;\n    font-size: 1rem;\n    text-align: center;\n}\n\n.slider-nav__dots {\n    position: absolute;\n    bottom: 20px;\n    left: 20px;\n    right: 20px;\n}\n\n.slider-nav__prev,\n.slider-nav__next,\n.slider__dot {\n    border-radius: 50%;\n    box-shadow: inset 0 0 0 2px;\n    cursor: pointer;\n    backface-visibility: hidden;\n    transition: transform 0.3s, box-shadow 0.3s;\n}\n\n.slider-nav__prev,\n.slider-nav__next {\n    position: absolute;\n    top: 50%;\n    width: 3rem;\n    height: 3rem;\n    margin-top: -1.5rem;\n    line-height: 3rem;\n}\n\n.slider-nav__prev {\n    left: 7%;\n}\n\n.slider-nav__next {\n    right: 7%;\n}\n\n.slider__dot {\n    display: inline-block;\n    width: 1rem;\n    height: 1rem;\n    margin: 0 1rem;\n}\n\n.slider-nav__prev:hover,\n.slider-nav__next:hover,\n.slider__dot.active,\n.slider__dot:hover {\n    transform: scale3d(1.5, 1.5, 1);\n}\n<\/style>\n<div class=\"grid\">\n    <div class=\"slider-box\">\n        <div class=\"slider\" id=\"slider2\">\n            <div class=\"slider__item\">\n                <img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,e_sharpen,f_auto,q_auto,dpr_2.0\/page_designer_1.png\" alt=\u201clandscape\u201d>\n            <\/div>\n            <div class=\"slider__item\">\n                <img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto,dpr_2.0\/page_designer_2.png\" alt=\u201cvertical\u201d>\n            <\/div>\n            <div class=\"slider__item\">\n                <img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_500,c_fill,f_auto,q_auto,dpr_2.0\/page_designer_3.png\" alt=\u201csquare\u201d>\n            <\/div>\n                    <\/div>\n        <div class=\"slider-nav\">\n            <div class=\"slider-nav__prev\" id=\"prev\"><i class=\"fa fa-angle-left\"><\/i><\/div>\n            <div class=\"slider-nav__next\" id=\"next\"><i class=\"fa fa-angle-right\"><\/i><\/div>\n            <div class=\"slider-nav__dots\" id=\"dots\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n<script>\n\nfunction insertScript(src, callback) {\n  var script = document.createElement('script');\n  script.onload = callback;\n  script.type = 'text\/javascript';\n  script.async = true;\n  script.src = src;\n  var s = document.getElementsByTagName('script')[0];\n  s.parentNode.insertBefore(script, s);\n }\n insertScript('\/javascripts\/jquery.min.js', function(){\n\n    'use strict';\n\n    var pluginName = 'slider',\n        defaults = {\n            next: '.slider-nav__next',\n            prev: '.slider-nav__prev',\n            item: '.slider__item',\n            dots: false,\n            dotClass: 'slider__dot',\n            autoplay: false,\n            autoplayTime: 3000,\n        };\n\n    function slider(element, options) {\n        this.$document = $(document);\n        this.$window = $(window);\n        this.$element = $(element);\n        this.options = $.extend({}, defaults, options);\n        this.init();\n    };\n\n    slider.prototype.init = function() {\n        this.setup();\n        this.attachEventHandlers();\n        this.update();\n    };\n\n    slider.prototype.setup = function(argument) {\n        this.$slides = this.$element.find(this.options.item);\n        this.count = this.$slides.length;\n        this.index = 0;\n\n        this.$next = $(this.options.next);\n        this.$prev = $(this.options.prev);\n\n        this.$canvas = $(document.createElement('div'));\n        this.$canvas.addClass('slider__canvas').appendTo(this.$element);\n        this.$slides.appendTo(this.$canvas);\n\n        this.$dots = $(this.options.dots);\n        this.$dots.length && this.createDots();\n    };\n\n    slider.prototype.createDots = function() {\n        var dots = [];\n        for (var i = 0; i < this.count; i += 1) {\n            dots[i] = '<span data-index=\"' + i + '\" class=\"' + this.options.dotClass + '\"><\/span>';\n        }\n        this.$dots.append(dots);\n    }\n\n    slider.prototype.attachEventHandlers = function() {\n        this.$element.on('prev.slider', this.prev.bind(this));\n        this.$document.on('click', this.options.prev, (function(e) {\n            this.$element.trigger('prev.slider');\n        }).bind(this));\n\n        this.$element.on('next.slider', this.next.bind(this));\n        this.$document.on('click', this.options.next, (function(e) {\n            this.$element.trigger('next.slider');\n        }).bind(this));\n\n        this.$element.on('update.slider', this.update.bind(this));\n        this.$window.on('resize load', (function(e) {\n            this.$element.trigger('update.slider');\n        }).bind(this));\n\n        this.$element.on('jump.slider', this.jump.bind(this));\n        this.$document.on('click', ('.' + this.options.dotClass), (function(e) {\n            var index = parseInt($(e.target).attr('data-index'));\n            this.$element.trigger('jump.slider', index);\n        }).bind(this));\n\n        this.$element.on('autoplay.slider', this.autoplay.bind(this));\n        this.$element.on('autoplayOn.slider', this.autoplayOn.bind(this));\n        this.$element.on('autoplayOff.slider', this.autoplayOff.bind(this));\n        this.$element.bind('prev.slider next.slider jump.slider', this.autoplay.bind(this));\n        this.options.autoplay && this.$element.trigger('autoplayOn.slider');\n    };\n\n    slider.prototype.next = function(e) {\n        this.index = (this.index + 1) % this.count;\n        this.slide();\n    };\n\n    slider.prototype.prev = function(e) {\n        this.index = Math.abs(this.index - 1 + this.count) % this.count;\n        this.slide();\n    };\n\n    slider.prototype.jump = function(e, index) {\n        this.index = index % this.count;\n        this.slide();\n    }\n\n    slider.prototype.autoplayOn = function(argument) {\n        this.options.autoplay = true;\n        this.$element.trigger('autoplay.slider');\n    };\n\n    slider.prototype.autoplayOff = function() {\n        this.autoplayClear();\n        this.options.autoplay = false;\n    }\n\n    slider.prototype.autoplay = function(argument) {\n        this.autoplayClear();\n        if (this.options.autoplay) {\n            this.autoplayId = setTimeout((function() {\n                this.$element.trigger('next.slider');\n                this.$element.trigger('autoplay.slider');\n            }).bind(this), this.options.autoplayTime);\n        }\n    };\n\n    slider.prototype.autoplayClear = function() {\n        this.autoplayId && clearTimeout(this.autoplayId);\n    }\n\n    slider.prototype.slide = function(index) {\n        undefined == index && (index = this.index);\n        var position = index * this.width * -1;\n        this.$canvas.css({\n            'transform': 'translate3d(' + position + 'px, 0, 0)',\n        });\n        this.updateCssClass();\n    };\n\n    slider.prototype.update = function() {\n        this.width = this.$element.width();\n        this.$canvas.width(this.width * this.count);\n        this.$slides.width(this.width);\n        this.slide();\n    };\n\n    slider.prototype.updateCssClass = function() {\n        this.$slides\n            .removeClass('active')\n            .eq(this.index)\n            .addClass('active');\n\n        this.$dots\n            .find('.' + this.options.dotClass)\n            .removeClass('active')\n            .eq(this.index)\n            .addClass('active');\n    }\n\n    $.fn[pluginName] = function(options) {\n        return this.each(function() {\n            !$.data(this, pluginName) && $.data(this, pluginName, new slider(this, options));\n        });\n    };\n\n\n$('#slider1').slider({\n    prev: '#prev',\n    next: '#next',\n    dots: '#dots',\n    autoplay: true,\n});\n$('#slider2').slider({\n    prev: '#prev',\n    next: '#next',\n    dots: '#dots',\n    autoplay: true,\n});\n\n});\n<\/script>\n<p>Such versatility spells flexibility, freedom, and speed, with no back-and-forths between the publication and design teams.<\/p>\n<h2>Seamless Display on Mobile and Social Channels<\/h2>\n<p>Recall that over half of all videos are watched on mobile, a popular platform for social apps.  Plus, notwithstanding that vertical videos are all the rage, most videos for website use are shot in landscape mode. Not to worry: Cloudinary AI automatically and intelligently crops videos to create vertical versions, ensuring a satisfactory delivery on mobile.<\/p>\n<h2>Superior Accessibility<\/h2>\n<p><a href=\"https:\/\/www.section508.gov\/blog\/do-section-508-accessibility-standards-apply-to-mywebsite\">Section 508 Accessibility Standards (or A11Y)<\/a>, a U.S. federal requirement,  (is fast becoming a standard practice for websites and apps. Videos and images feature prominently in the <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/\">checklist<\/a> for rendering digital channels accessible. In addition, more and more consumers are watching videos muted with subtitles on.<\/p>\n<p>To accommodate those requirements and trends, you can, with Cloudinary\u2019s automated AI capability, transcribe and create subtitles for videos when uploading them to Cloudinary. To display subtitles, simply select a checkbox in the component\u2019s user interface.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/page_designer_a11y.png\" alt=\"Accessibility\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"956\"\/><\/p>\n<h2>Smooth Maintenance of Brand Identity<\/h2>\n<p>Cloudinary automates the process of overlaying brands or logos to videos with no need for manual editing. See the video screenshot below for an example of a logo Cloudinary has added to the top left corner for a prominent display.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/page_designer_wm.png\" alt=\"Brand Identity\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"956\"\/><\/p>\n<p>Two major benefits:<\/p>\n<ul>\n<li>Cloudinary \u201cburns\u201d logos into videos, making it harder for repurposing by unauthorized parties and hence protecting your digital assets.<\/li>\n<li>You have complete control of the online experience to be delivered by using Cloudinary\u2019s video player, but not with other platforms like YouTube.<\/li>\n<\/ul>\n<h2>At-Will Customization of Components<\/h2>\n<p>Again, by updating the published <a href=\"https:\/\/github.com\/cloudinary\/cloudinary_sfcc_pagedesigner\">integration code<\/a>, you can create or redesign video components to make even better use of Cloudinary\u2019s exceptional capabilities for manipulating and optimizing rich media. How about developing an image that spotlights all of Cloudinary\u2019s extensive image capabilities? Maybe add a coming-attraction kind of movie as a prelaunch feature for a video?<\/p>\n<p>We are convinced that SFCC customers will relish the promising capabilities of Page Designer on Cloudinary. View our <a href=\"http:\/\/cloudinary.rocks\/pd\">short demo<\/a> and tell us about your experience with this integration. Not least, stay tuned for other advanced Cloudinary capabilities becoming available in the coming months.<\/p>\n<hr \/>\n<h2>Further Reading on Dynamic Media<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/solutions\/ecommerce\">Dynamic media management for eCommerce<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/why_dynamic_media_platform_is_must_have_for_ecommerce\">Why a Dynamic Media Platform is a Must-Have for ECommerce<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/how_to_automatically_and_professionally_remove_photo_backgrounds\">Remove photo backgrounds automatically with AI<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/10_great_jquery_sliders_and_5_ways_to_build_one_yourself\">Top 10 jQuery sliders &amp; how to create your own<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/adding_watermarks_credits_badges_and_text_overlays_to_images\">Adding image watermarks, credits, badges and text overlays to images<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_product_gallery_enabling_a_dynamic_buyer_experience\">Product gallery enabling a dynamic buyer experience<\/a> equipped with 360 product viewer.<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/new_ai_based_image_auto_crop_algorithm_sticks_to_the_subject\">Smart and automatic content-aware image cropping<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/taking_cloudinary_s_magento_extension_to_the_next_level\">Get More from Your Media with New Magento Extension<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/how_to_improve_your_shopify_s_store_loading_times_using_cloudinary\">Shopify image optimization<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/how_to_overlay_text_on_image_easily_pixel_perfect_and_with_no_css_html\">Overlay text on an image<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21902,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,98,303],"class_list":["post-21901","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-e-commerce","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Cloudinary Integration With Salesforce B2C Commerce Page Designer<\/title>\n<meta name=\"description\" content=\"Cloudinary\u2019s integration for SFCC Page Designer enables you to optimize videos for any device, maintain brand identity, make videos accessible to all audiences.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing the Cloudinary Integration With Salesforce Commerce Page Designer for B2C\" \/>\n<meta property=\"og:description\" content=\"Cloudinary\u2019s integration for SFCC Page Designer enables you to optimize videos for any device, maintain brand identity, make videos accessible to all audiences.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-18T17:01:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-26T13:26:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649745792\/Web_Assets\/blog\/Page-Designer-cover\/Page-Designer-cover-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Introducing the Cloudinary Integration With Salesforce Commerce Page Designer for B2C\",\"datePublished\":\"2019-06-18T17:01:59+00:00\",\"dateModified\":\"2024-05-26T13:26:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c\"},\"wordCount\":12,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649745792\/Web_Assets\/blog\/Page-Designer-cover\/Page-Designer-cover.jpg?_i=AA\",\"keywords\":[\"Asset Management\",\"E-commerce\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2019\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c\",\"url\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c\",\"name\":\"Cloudinary Integration With Salesforce B2C Commerce Page Designer\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649745792\/Web_Assets\/blog\/Page-Designer-cover\/Page-Designer-cover.jpg?_i=AA\",\"datePublished\":\"2019-06-18T17:01:59+00:00\",\"dateModified\":\"2024-05-26T13:26:05+00:00\",\"description\":\"Cloudinary\u2019s integration for SFCC Page Designer enables you to optimize videos for any device, maintain brand identity, make videos accessible to all audiences.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649745792\/Web_Assets\/blog\/Page-Designer-cover\/Page-Designer-cover.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649745792\/Web_Assets\/blog\/Page-Designer-cover\/Page-Designer-cover.jpg?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introducing the Cloudinary Integration With Salesforce Commerce Page Designer for B2C\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Cloudinary Integration With Salesforce B2C Commerce Page Designer","description":"Cloudinary\u2019s integration for SFCC Page Designer enables you to optimize videos for any device, maintain brand identity, make videos accessible to all audiences.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c","og_locale":"en_US","og_type":"article","og_title":"Introducing the Cloudinary Integration With Salesforce Commerce Page Designer for B2C","og_description":"Cloudinary\u2019s integration for SFCC Page Designer enables you to optimize videos for any device, maintain brand identity, make videos accessible to all audiences.","og_url":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c","og_site_name":"Cloudinary Blog","article_published_time":"2019-06-18T17:01:59+00:00","article_modified_time":"2024-05-26T13:26:05+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649745792\/Web_Assets\/blog\/Page-Designer-cover\/Page-Designer-cover-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c"},"author":{"name":"","@id":""},"headline":"Introducing the Cloudinary Integration With Salesforce Commerce Page Designer for B2C","datePublished":"2019-06-18T17:01:59+00:00","dateModified":"2024-05-26T13:26:05+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c"},"wordCount":12,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649745792\/Web_Assets\/blog\/Page-Designer-cover\/Page-Designer-cover.jpg?_i=AA","keywords":["Asset Management","E-commerce","Video"],"inLanguage":"en-US","copyrightYear":"2019","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c","url":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c","name":"Cloudinary Integration With Salesforce B2C Commerce Page Designer","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649745792\/Web_Assets\/blog\/Page-Designer-cover\/Page-Designer-cover.jpg?_i=AA","datePublished":"2019-06-18T17:01:59+00:00","dateModified":"2024-05-26T13:26:05+00:00","description":"Cloudinary\u2019s integration for SFCC Page Designer enables you to optimize videos for any device, maintain brand identity, make videos accessible to all audiences.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649745792\/Web_Assets\/blog\/Page-Designer-cover\/Page-Designer-cover.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649745792\/Web_Assets\/blog\/Page-Designer-cover\/Page-Designer-cover.jpg?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/introducing_the_cloudinary_integration_with_salesforce_commerce_page_designer_for_b2c#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Introducing the Cloudinary Integration With Salesforce Commerce Page Designer for B2C"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649745792\/Web_Assets\/blog\/Page-Designer-cover\/Page-Designer-cover.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21901"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21901\/revisions"}],"predecessor-version":[{"id":33877,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21901\/revisions\/33877"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21902"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}