{"id":7147,"date":"2024-04-14T16:49:14","date_gmt":"2024-04-14T08:49:14","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=7147"},"modified":"2024-04-14T16:49:14","modified_gmt":"2024-04-14T08:49:14","slug":"utilize-collection-fields-in-personalized-code-injections","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/utilize-collection-fields-in-personalized-code-injections\/","title":{"rendered":"Utilize Collection fields in personalized code injections"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p id=\"\">Through dynamic injections, you have the flexibility to employ your CMS Collection fields for real-time updates in injected code. This enables the creation of interactive <a href=\"https:\/\/webflow.com\/blog\/customizing-your-social-sharing-buttons-with-webflow-cms\" id=\"\">social sharing buttons<\/a>, e-commerce platforms, podcast and music platforms, event websites, and much more.<\/p>\n<h2 id=\"\">Key components of a dynamic injection<\/h2>\n<p id=\"\">Each dynamic injection varies slightly, but they all necessitate the following:<\/p>\n<ul id=\"\">\n<li id=\"\">The external embed <strong id=\"\">script<\/strong> with <strong id=\"\">distinct identifiers<\/strong> for the content you wish to dynamically present (such as a tweet, Shopify item, or Eventbrite event)<\/li>\n<li id=\"\">A <strong id=\"\">Webflow CMS Collection<\/strong> containing a Plain Text field for inputting the unique identifier<\/li>\n<\/ul>\n<h2 id=\"\">Development of a dynamic injection<\/h2>\n<p id=\"\">Let&#8217;s craft a click-to-tweet button. To set up the dynamic injection:<\/p>\n<ol id=\"\">\n<li id=\"\">Establish a Plain text field in your collection for the unique identifier, naming it &#8220;Tweet text&#8221;<\/li>\n<li id=\"\">Copy the code provided below<\/li>\n<\/ol>\n<ol start=\"3\" id=\"\">\n<li id=\"\">Insert an Embed element in a Collection list or on a Collection page<\/li>\n<li id=\"\">Paste the code<\/li>\n<li id=\"\">Choose the unique identifier &#8220;Tweet Text&#8221;<\/li>\n<li id=\"\">Click\u00a0<strong id=\"\">Include Field<\/strong><\/li>\n<li id=\"\">Pick &#8220;Tweet Text&#8221;<\/li>\n<\/ol>\n<figure id=\"\" class=\"w-richtext-figure-type-image w-richtext-align-fullwidth\" data-rt-type=\"image\" data-rt-align=\"fullwidth\" data-rt-max-width=\"1501px\">\n<div id=\"\"><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b949821ee872675b371897_611ad10ee6937539e3d6ab76_use-collection-fields-in-custom-code-embeds_1.png\" loading=\"lazy\" width=\"auto\" height=\"auto\" alt='A HTML embed code editor is open and filled out. The + Add field button on the right side of the editor is highlighted. The drop down text menu \"Tweet Text\" is also highlighted on the editor.' id=\"\" title=\"64b949821ee872675b371897_611ad10ee6937539e3d6ab76_use-collection-fields-in-custom-code-embeds_1\"><\/div>\n<\/figure>\n<h6 id=\"\">Refer to a comprehensive guide on developing a more tailored <a href=\"http:\/\/help.webflow.com\/article\/how-to-dynamically-embed-twitter-share-buttons-with-webflow-cms\" id=\"\">click-to-tweet button<\/a>.<\/h6>\n<p id=\"\">Explore these guides to learn how to utilize dynamic injections for:<\/p>\n<ul id=\"\">\n<li id=\"\"><a href=\"http:\/\/help.webflow.com\/article\/how-to-dynamically-embed-shopify-products-with-webflow-cms\" id=\"\">E-commerce platforms<\/a>\u00a0(using external tools like Shopify)<\/li>\n<li id=\"\">Podcast and music platforms\u00a0(via SoundCloud)<\/li>\n<li id=\"\"><a href=\"http:\/\/help.webflow.com\/article\/how-to-dynamically-embed-eventbrite-events-with-webflow-cms\" id=\"\">Event websites<\/a>\u00a0(using Eventbrite)<\/li>\n<\/ul>\n<blockquote id=\"\"><p><strong id=\"\">Recognized constraint: <\/strong>Dynamic injections involving E-commerce fields will not auto-update based on the selected variant. For instance, if a visitor on your site chooses a product variant with a different price, this price change will not be reflected via the dynamic injection, and the customer will observe no pricing modification.<\/p><\/blockquote>\n<\/div>\n","protected":false},"excerpt":{"rendered":"With Dynamic Embeds, you can use your CMS Collection fields to dynamically update embedded code.","protected":false},"author":2,"featured_media":5179,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[300],"tags":[],"class_list":{"0":"post-7147","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-cms-dynamic-content","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/7147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=7147"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/7147\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5209"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=7147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=7147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=7147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}