{"id":2950,"date":"2023-02-16T13:45:46","date_gmt":"2023-02-16T13:45:46","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/global-widget-library\/"},"modified":"2024-04-05T21:15:21","modified_gmt":"2024-04-05T21:15:21","slug":"global-widget-library","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/global-widget-library\/","title":{"rendered":"Global Widget Library"},"content":{"rendered":"<p>You can add, track and test interactive tools or dynamic design elements on your ion pages by leveraging the global Widget Library. The global widget library provides centralized management and enables you to define variables in your custom, portable code to make it dynamic and track-able!<\/p>\n<h3>Have widget code you\u2019re ready to use? Let\u2019s get started!<\/h3>\n<p><strong>1. How to Add widget code to your ion console<\/strong><\/p>\n<p>a. Navigate to Libraries and click on\u00a0Widgets<\/p>\n<p>b. Add a title and a new category<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-6389\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.04.40-PM-1024x548.png\" alt=\"\" width=\"1024\" height=\"548\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.04.40-PM-1024x548.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.04.40-PM-300x160.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.04.40-PM-768x411.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.04.40-PM-585x313.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.04.40-PM.png 1511w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>c. Paste widget code in HTML editor<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-6390\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.06.21-PM-1024x504.png\" alt=\"\" width=\"1024\" height=\"504\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.06.21-PM-1024x504.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.06.21-PM-300x148.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.06.21-PM-768x378.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.06.21-PM-1536x756.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.06.21-PM-585x288.png 585w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.06.21-PM.png 1643w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p>d. Use ## in code where you want ion to identify variables<\/p>\n<p>e. Define variable requirements and type<\/p>\n<p>I. Optionally set variables as required, if applicable, and select text, action or image from the \u201ctype\u201d drop-down\u00a0menu<\/p>\n<p><strong>2. Pull widget into ion page<\/strong><\/p>\n<p>a. Navigate into page<\/p>\n<p>b. Drag the gear icon from the Basics category in your Palette tab into the location where you would like to place your widget.<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6392\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.13.38-PM.png\" alt=\"\" width=\"277\" height=\"192\" \/><\/p>\n<p>c. Select the category and widget you\u2019d like to add to the page, and you&#8217;re set!<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6391\" src=\"https:\/\/obo.zoj.mybluehost.me\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.14.18-PM.png\" alt=\"\" width=\"934\" height=\"671\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.14.18-PM.png 934w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.14.18-PM-300x216.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.14.18-PM-768x552.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/02\/Screen-Shot-2024-04-05-at-5.14.18-PM-585x420.png 585w\" sizes=\"auto, (max-width: 934px) 100vw, 934px\" \/><br \/>\n<strong>3. Link, tag and add content to your widget<\/strong><\/p>\n<p>a. Depending on the variables defined in the widget library, use the dynamic editor to add content, images, links\u00a0and tags for tracking<\/p>\n<p>b. Click the image element, if applicable, from within the Edit\u00a0tab of your creative studio and select the category then image you wish to add<\/p>\n<p>c. Click the link element, if applicable, from within the Edit\u00a0tab in your creative studio and select the next page or external URL you wish to drive traffic to upon click. Tag your link for tracking by selecting a tag label from the drop-down or add a new tag label in the field to the right<\/p>\n<p>d. Double-click a piece of text directly or select a text element from within the Edit tab of your creative studio, if applicable, to add text to your dynamic, page element<\/p>\n<hr \/>\n<p data-pm-slice=\"1 1 [&quot;bullet_list&quot;,{},&quot;list_item&quot;,{}]\">If you have any questions, please contact us on <a href=\"mailto:help@ioninteractive.com\" rel=\"noopener noreferrer nofollow\">help@ioninteractive.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can add, track and test interactive tools or dynamic design elements on your ion pages by leveraging the global Widget Library. The global widget library provides centralized management and enables you to define [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":5752,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[22,818],"tags":[2147,2306],"class_list":["post-2950","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-functionalities","category-widget","tag-ion-libraries","tag-widget"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=2950"}],"version-history":[{"count":2,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2950\/revisions"}],"predecessor-version":[{"id":6393,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2950\/revisions\/6393"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5752"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=2950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=2950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=2950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}