{"id":629,"date":"2020-11-20T17:48:16","date_gmt":"2020-11-20T17:48:16","guid":{"rendered":"https:\/\/vwo.com\/product-updates\/?p=629"},"modified":"2025-01-30T06:07:27","modified_gmt":"2025-01-30T06:07:27","slug":"introduce-new-content-on-the-page-using-html","status":"publish","type":"post","link":"https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/","title":{"rendered":"Introduce New Content on the Page using HTML"},"content":{"rendered":"\n

A core aspect of creating Testing<\/a> or Rollouts<\/a> campaigns using Wingify is to set up modifications on the page to create variations. These modifications are changes to the content, style or functionality of existing elements, or introduction of new elements with new functions on the page.<\/p>\n\n\n\n

The Visual Editor<\/a> offers a range of operations by which comprehensive changes can be performed on existing elements. New components on the page can be introduced by editing the HTML of the parent element or simply by using the ‘Add’ operation from the Editor.<\/p>\n\n\n\n

With the ‘Edit Code’ section of the Visual Editor, it is possible to modify existing operations or add new ones if it follows Wingify’s notations. If not, they are treated as custom operations and are executed as is. It is even possible to add campaign level JS\/CSS to execute before or after the campaign changes are applied. Do check out this article<\/a> for a detailed guide on the different operations on Wingify\u2019s Editor.<\/p>\n\n\n\n

The ‘Edit Code’ section contains a new ‘HTML’ tab that lets you add custom HTML code on to the page. This gives you a blank slate where you can develop the page using your own code or build them from different components from an asset library that you could be using for your website.<\/p>\n\n\n\n

\"Add
Adding the sitemap as a footer on Wingify\u2019s homepage by adding its HTML with the Editor.<\/figcaption><\/figure>\n\n\n\n

When you add custom HTML code, the new content gets appended to the bottom of the page. You can rearrange or move these around and fix them on the page as per your requirement. It is now possible to even create your own widgets to be used on the page with Javascript functions inside the HTML itself. Wish you could simply use the code of a banner or pop-up that you used for an earlier campaign? Grab its HTML and add it to the page, edit the contents based on what you need to test, fine tune its position and you\u2019re off! All within Wingify\u2019s Editor.<\/p>\n\n\n\n

Here are a few testing ideas you can easily implement by using custom HTML on the page:<\/p>\n\n\n\n

    \n
  1. Test the influence of social networking elements on your website. You can use Facebook\u2019s configurator<\/a> to generate HTML code snippets for social feeds, posts and like\/share buttons. These snippets can directly go into the page as custom code via Wingify\u2019s Editor. You can then visually adjust the widget\u2019s layout and position on the page. And just like that, you have a test variation with which you can understand the effect it has on engagement.<\/li>\n\n\n\n
  2. Visitors love to see the weather of popular travel destinations when they plan their next trip. Grab the HTML code for your own customised weather widget from any free widget provider and test it out with VWO.<\/li>\n<\/ol>\n\n\n\n

    With the ability to now add custom code in the form of Javascript, CSS and HTML, it not only brings completeness to the various ways by which you can use custom code, it could help you shed a lot of dependencies and be closer to hitting the testing velocity you\u2019ve always dreamed of.<\/p>\n","protected":false},"excerpt":{"rendered":"

    A core aspect of creating Testing or Rollouts campaigns using Wingify is to set up modifications on the page to create variations. These modifications are changes to the content, style or functionality of existing elements, or introduction of new elements with new functions on the page. The Visual Editor offers a range of operations by…<\/p>\n","protected":false},"author":275,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,5],"tags":[12,13],"feature":[],"industry-type":[],"class_list":["post-629","post","type-post","status-publish","format-standard","hentry","category-testing","category-deploy","tag-client-side-testing","tag-visual-editor"],"acf":[],"yoast_head":"\nIntroduce New Content on the Page using HTML| Wingify Product Updates<\/title>\n<meta name=\"description\" content=\"New components on the page can be introduced by editing the HTML of the parent element or simply by using the \u2018Add\u2019 operation from the Wingify Visual Editor\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduce New Content on the Page using HTML| Wingify Product Updates\" \/>\n<meta property=\"og:description\" content=\"New components on the page can be introduced by editing the HTML of the parent element or simply by using the \u2018Add\u2019 operation from the Wingify Visual Editor\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Wingify Product Updates\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-20T17:48:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-30T06:07:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/11\/Add-html-vwo-footer.png\" \/>\n<meta name=\"author\" content=\"Sathyajith Vijayakumar\" \/>\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\":\"Article\",\"@id\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/introduce-new-content-on-the-page-using-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/introduce-new-content-on-the-page-using-html\\\/\"},\"author\":{\"name\":\"Sathyajith Vijayakumar\",\"@id\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/#\\\/schema\\\/person\\\/c7749fc56afdfa5dd54b5be40818cfa5\"},\"headline\":\"Introduce New Content on the Page using HTML\",\"datePublished\":\"2020-11-20T17:48:16+00:00\",\"dateModified\":\"2025-01-30T06:07:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/introduce-new-content-on-the-page-using-html\\\/\"},\"wordCount\":539,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/introduce-new-content-on-the-page-using-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/static.wingify.com\\\/gcp\\\/uploads\\\/sites\\\/13\\\/2020\\\/11\\\/Add-html-vwo-footer.png\",\"keywords\":[\"Client Side Testing\",\"Visual Editor\"],\"articleSection\":[\"Wingify Experimentation\",\"Wingify Web Rollouts\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wingify.com\\\/product-updates\\\/introduce-new-content-on-the-page-using-html\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/introduce-new-content-on-the-page-using-html\\\/\",\"url\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/introduce-new-content-on-the-page-using-html\\\/\",\"name\":\"Introduce New Content on the Page using HTML| Wingify Product Updates\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/introduce-new-content-on-the-page-using-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/introduce-new-content-on-the-page-using-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/static.wingify.com\\\/gcp\\\/uploads\\\/sites\\\/13\\\/2020\\\/11\\\/Add-html-vwo-footer.png\",\"datePublished\":\"2020-11-20T17:48:16+00:00\",\"dateModified\":\"2025-01-30T06:07:27+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/#\\\/schema\\\/person\\\/c7749fc56afdfa5dd54b5be40818cfa5\"},\"description\":\"New components on the page can be introduced by editing the HTML of the parent element or simply by using the \u2018Add\u2019 operation from the Wingify Visual Editor\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/introduce-new-content-on-the-page-using-html\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wingify.com\\\/product-updates\\\/introduce-new-content-on-the-page-using-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/introduce-new-content-on-the-page-using-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/static.wingify.com\\\/gcp\\\/uploads\\\/sites\\\/13\\\/2020\\\/11\\\/Add-html-vwo-footer.png\",\"contentUrl\":\"https:\\\/\\\/static.wingify.com\\\/gcp\\\/uploads\\\/sites\\\/13\\\/2020\\\/11\\\/Add-html-vwo-footer.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/introduce-new-content-on-the-page-using-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introduce New Content on the Page using HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/#website\",\"url\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/\",\"name\":\"Wingify Product Updates\",\"description\":\"Just another Wingify site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wingify.com\\\/product-updates\\\/#\\\/schema\\\/person\\\/c7749fc56afdfa5dd54b5be40818cfa5\",\"name\":\"Sathyajith Vijayakumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cb32321ccdfec92f9ddfe538f9195989d21bd1faa1a3b9f184f133d8d8a30a08?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cb32321ccdfec92f9ddfe538f9195989d21bd1faa1a3b9f184f133d8d8a30a08?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cb32321ccdfec92f9ddfe538f9195989d21bd1faa1a3b9f184f133d8d8a30a08?s=96&d=mm&r=g\",\"caption\":\"Sathyajith Vijayakumar\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introduce New Content on the Page using HTML| Wingify Product Updates","description":"New components on the page can be introduced by editing the HTML of the parent element or simply by using the \u2018Add\u2019 operation from the Wingify Visual Editor","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:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/","og_locale":"en_US","og_type":"article","og_title":"Introduce New Content on the Page using HTML| Wingify Product Updates","og_description":"New components on the page can be introduced by editing the HTML of the parent element or simply by using the \u2018Add\u2019 operation from the Wingify Visual Editor","og_url":"https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/","og_site_name":"Wingify Product Updates","article_published_time":"2020-11-20T17:48:16+00:00","article_modified_time":"2025-01-30T06:07:27+00:00","og_image":[{"url":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/11\/Add-html-vwo-footer.png","type":"","width":"","height":""}],"author":"Sathyajith Vijayakumar","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#article","isPartOf":{"@id":"https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/"},"author":{"name":"Sathyajith Vijayakumar","@id":"https:\/\/wingify.com\/product-updates\/#\/schema\/person\/c7749fc56afdfa5dd54b5be40818cfa5"},"headline":"Introduce New Content on the Page using HTML","datePublished":"2020-11-20T17:48:16+00:00","dateModified":"2025-01-30T06:07:27+00:00","mainEntityOfPage":{"@id":"https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/"},"wordCount":539,"commentCount":0,"image":{"@id":"https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#primaryimage"},"thumbnailUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/11\/Add-html-vwo-footer.png","keywords":["Client Side Testing","Visual Editor"],"articleSection":["Wingify Experimentation","Wingify Web Rollouts"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/","url":"https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/","name":"Introduce New Content on the Page using HTML| Wingify Product Updates","isPartOf":{"@id":"https:\/\/wingify.com\/product-updates\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#primaryimage"},"image":{"@id":"https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#primaryimage"},"thumbnailUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/11\/Add-html-vwo-footer.png","datePublished":"2020-11-20T17:48:16+00:00","dateModified":"2025-01-30T06:07:27+00:00","author":{"@id":"https:\/\/wingify.com\/product-updates\/#\/schema\/person\/c7749fc56afdfa5dd54b5be40818cfa5"},"description":"New components on the page can be introduced by editing the HTML of the parent element or simply by using the \u2018Add\u2019 operation from the Wingify Visual Editor","breadcrumb":{"@id":"https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#primaryimage","url":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/11\/Add-html-vwo-footer.png","contentUrl":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/11\/Add-html-vwo-footer.png"},{"@type":"BreadcrumbList","@id":"https:\/\/wingify.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wingify.com\/product-updates\/"},{"@type":"ListItem","position":2,"name":"Introduce New Content on the Page using HTML"}]},{"@type":"WebSite","@id":"https:\/\/wingify.com\/product-updates\/#website","url":"https:\/\/wingify.com\/product-updates\/","name":"Wingify Product Updates","description":"Just another Wingify site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wingify.com\/product-updates\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wingify.com\/product-updates\/#\/schema\/person\/c7749fc56afdfa5dd54b5be40818cfa5","name":"Sathyajith Vijayakumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cb32321ccdfec92f9ddfe538f9195989d21bd1faa1a3b9f184f133d8d8a30a08?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cb32321ccdfec92f9ddfe538f9195989d21bd1faa1a3b9f184f133d8d8a30a08?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cb32321ccdfec92f9ddfe538f9195989d21bd1faa1a3b9f184f133d8d8a30a08?s=96&d=mm&r=g","caption":"Sathyajith Vijayakumar"}}]}},"_links":{"self":[{"href":"https:\/\/wingify.com\/product-updates\/wp-json\/wp\/v2\/posts\/629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wingify.com\/product-updates\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wingify.com\/product-updates\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wingify.com\/product-updates\/wp-json\/wp\/v2\/users\/275"}],"replies":[{"embeddable":true,"href":"https:\/\/wingify.com\/product-updates\/wp-json\/wp\/v2\/comments?post=629"}],"version-history":[{"count":16,"href":"https:\/\/wingify.com\/product-updates\/wp-json\/wp\/v2\/posts\/629\/revisions"}],"predecessor-version":[{"id":3290,"href":"https:\/\/wingify.com\/product-updates\/wp-json\/wp\/v2\/posts\/629\/revisions\/3290"}],"wp:attachment":[{"href":"https:\/\/wingify.com\/product-updates\/wp-json\/wp\/v2\/media?parent=629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wingify.com\/product-updates\/wp-json\/wp\/v2\/categories?post=629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wingify.com\/product-updates\/wp-json\/wp\/v2\/tags?post=629"},{"taxonomy":"feature","embeddable":true,"href":"https:\/\/wingify.com\/product-updates\/wp-json\/wp\/v2\/feature?post=629"},{"taxonomy":"industry-type","embeddable":true,"href":"https:\/\/wingify.com\/product-updates\/wp-json\/wp\/v2\/industry-type?post=629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}