<\/strong><\/h3>\n\n\n\nIn the example below, there is a quiz with four possible results (Result A, B, C and D). According to the score obtained by the user, previously defined in the rules, the following condition was defined using the Show & Hide functionality:<\/p>\n\n\n\n![\"\"](\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-2-1024x496.png\")
<\/figure>\n\n\n\nThis way, if the ScoreLetter<\/em> value of the rules is equal to A, the content present in the container named \u201cResult A\u201d will appear. If it is equal to B, the other container will be displayed, and so on:<\/p>\n\n\n\n![\"\"](\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-3-1024x491.png\")
<\/figure>\n\n\n\nNote that, in this case, the rules that save the ScoreLetter data had already been defined through page rules:<\/p>\n\n\n\n![\"\"](\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-4-1024x522.png\")
<\/figure>\n\n\n\nThe same goes for the rules of a submit button, for example. The important thing is that the data that will trigger the dynamic conditioning (here exemplified with the rule: save data > ScoreLetter = A) is collected before the Show & Hide, which only works if there is a page refresh<\/strong>.<\/p>\n\n\n\n\u00a0You can apply the same logic to hide a form that has already been filled out by the user, and display a thank you message. For this, add a rule on the submit button that will save the data that will trigger the Show & Hide conditions. For example: save data > formcomplete = true<\/strong><\/p>\n\n\n\n![\"\"](\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-5-1024x499.png\")
<\/figure>\n\n\n\nNow, select the thank you message you want to display, and apply the condition: show conditionally > formcomplete \u2013 equals \u2013 true<\/strong><\/p>\n\n\n\n![\"\"](\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-6.png\")
<\/figure>\n\n\n\n\u00a0Similarly, you will select the form and set: hide conditionally > formcomplete \u2013 equals \u2013 true<\/strong><\/p>\n\n\n\n![\"\"](\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-7.png\")
<\/figure>\n\n\n\nDone! This way, if the respondent is the same, the thank you message will be displayed whenever he\/she returns to the experience, indicating that the form has already been filled out previously:<\/p>\n\n\n\n![\"\"](\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-8.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-1024x514.png\")
<\/figure>\n\n\n\nEmbed<\/strong><\/h3>\n\n\n\nWithin the same style section of your creative studio, you will find the \u201cHide when embedded\u201d checkbox. This option is great for pages that you would like to embed into your website! This option allows you to publish pages as you normally would for your typical traffic but also use the Ion embed code to embed certain portions of the page on your website:<\/p>\n\n\n\n![\"\"](\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-9.png\")
<\/figure>\n\n\n\nFor example, after building a page, you may decide that you would really love to embed the form and Thank You page content into your website. You can do this with a single experience by simply selecting the content you don\u2019t want to show on your website, and checking the \u201chide when embedded\u201d checkbox. You will then be able to use the Ion embed code to embed the form and Thank You page content into your website. For more information on ion embed code, click here<\/a>.<\/p>\n\n\n\nResponsive page<\/strong><\/h3>\n\n\n\nWhen editing a responsive page, you will also have show and hide style options to show\/hide certain elements for certain screen sizes. When deciding to hide a certain element, just select the screen size for which you want to hide its content. Below, find the abbreviation
to which device type each size typically corresponds to:<\/p>\n\n\n\n
XS = portrait mode display
SM = landscape mode screen
MD = tablet
lg = desktop<\/p>\n\n\n\n
If you want to hide content when viewing a certain page on a mobile device, you can check the \u201cHide in XS\u201d checkbox \u2013 it will not render when the page is viewed on a mobile device:<\/p>\n\n\n\n![\"\"](\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/05\/image-1.png\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"You can display different content to different visitors based on the presence of certain query string values or data collected elsewhere in the experience. For example, you could set your email address form field […]<\/p>\n","protected":false},"author":5,"featured_media":6022,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[2272,2078],"tags":[2173,2194],"class_list":["post-3108","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-rules-overview-the-advanced-capabilites","category-the-advanced-capabilites","tag-advanced","tag-rules"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3108","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\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=3108"}],"version-history":[{"count":6,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3108\/revisions"}],"predecessor-version":[{"id":7742,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3108\/revisions\/7742"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/6022"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=3108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=3108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=3108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/figure>\n\n\n\nThis way, if the ScoreLetter<\/em> value of the rules is equal to A, the content present in the container named \u201cResult A\u201d will appear. If it is equal to B, the other container will be displayed, and so on:<\/p>\n\n\n\n Note that, in this case, the rules that save the ScoreLetter data had already been defined through page rules:<\/p>\n\n\n\n The same goes for the rules of a submit button, for example. The important thing is that the data that will trigger the dynamic conditioning (here exemplified with the rule: save data > ScoreLetter = A) is collected before the Show & Hide, which only works if there is a page refresh<\/strong>.<\/p>\n\n\n\n \u00a0You can apply the same logic to hide a form that has already been filled out by the user, and display a thank you message. For this, add a rule on the submit button that will save the data that will trigger the Show & Hide conditions. For example: save data > formcomplete = true<\/strong><\/p>\n\n\n\n Now, select the thank you message you want to display, and apply the condition: show conditionally > formcomplete \u2013 equals \u2013 true<\/strong><\/p>\n\n\n\n \u00a0Similarly, you will select the form and set: hide conditionally > formcomplete \u2013 equals \u2013 true<\/strong><\/p>\n\n\n\n Done! This way, if the respondent is the same, the thank you message will be displayed whenever he\/she returns to the experience, indicating that the form has already been filled out previously:<\/p>\n\n\n\n Within the same style section of your creative studio, you will find the \u201cHide when embedded\u201d checkbox. This option is great for pages that you would like to embed into your website! This option allows you to publish pages as you normally would for your typical traffic but also use the Ion embed code to embed certain portions of the page on your website:<\/p>\n\n\n\n For example, after building a page, you may decide that you would really love to embed the form and Thank You page content into your website. You can do this with a single experience by simply selecting the content you don\u2019t want to show on your website, and checking the \u201chide when embedded\u201d checkbox. You will then be able to use the Ion embed code to embed the form and Thank You page content into your website. For more information on ion embed code, click here<\/a>.<\/p>\n\n\n\n When editing a responsive page, you will also have show and hide style options to show\/hide certain elements for certain screen sizes. When deciding to hide a certain element, just select the screen size for which you want to hide its content. Below, find the abbreviation XS = portrait mode display If you want to hide content when viewing a certain page on a mobile device, you can check the \u201cHide in XS\u201d checkbox \u2013 it will not render when the page is viewed on a mobile device:<\/p>\n\n\n\n You can display different content to different visitors based on the presence of certain query string values or data collected elsewhere in the experience. For example, you could set your email address form field […]<\/p>\n","protected":false},"author":5,"featured_media":6022,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[2272,2078],"tags":[2173,2194],"class_list":["post-3108","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-rules-overview-the-advanced-capabilites","category-the-advanced-capabilites","tag-advanced","tag-rules"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3108","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\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=3108"}],"version-history":[{"count":6,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3108\/revisions"}],"predecessor-version":[{"id":7742,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3108\/revisions\/7742"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/6022"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=3108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=3108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=3108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\nEmbed<\/strong><\/h3>\n\n\n\n
<\/figure>\n\n\n\nResponsive page<\/strong><\/h3>\n\n\n\n
to which device type each size typically corresponds to:<\/p>\n\n\n\n
SM = landscape mode screen
MD = tablet
lg = desktop<\/p>\n\n\n\n<\/figure>\n","protected":false},"excerpt":{"rendered":"