{"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:\/\/vwo.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 VWO 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 VWO’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 VWO\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 VWO\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 VWO\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 VWO\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 VWO 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| VWO 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 VWO 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:\/\/vwo.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| VWO 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 VWO Visual Editor\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/\" \/>\n<meta property=\"og:site_name\" content=\"VWO 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\t<meta property=\"og:image:width\" content=\"1424\" \/>\n\t<meta property=\"og:image:height\" content=\"786\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/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:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/\"},\"author\":{\"name\":\"Sathyajith Vijayakumar\",\"@id\":\"https:\/\/vwo.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:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/\"},\"wordCount\":539,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/vwo.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\":[\"VWO Testing\",\"VWO Web Rollouts\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/\",\"url\":\"https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/\",\"name\":\"Introduce New Content on the Page using HTML| VWO Product Updates\",\"isPartOf\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vwo.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:\/\/vwo.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 VWO Visual Editor\",\"breadcrumb\":{\"@id\":\"https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/vwo.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:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/vwo.com\/product-updates\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introduce New Content on the Page using HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vwo.com\/product-updates\/#website\",\"url\":\"https:\/\/vwo.com\/product-updates\/\",\"name\":\"VWO Product Updates\",\"description\":\"Just another VWO site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vwo.com\/product-updates\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/vwo.com\/product-updates\/#\/schema\/person\/c7749fc56afdfa5dd54b5be40818cfa5\",\"name\":\"Sathyajith Vijayakumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/vwo.com\/product-updates\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/067196409673f840322b0a84a2b9177566057677bff3e239367e400d8fabcdc8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/067196409673f840322b0a84a2b9177566057677bff3e239367e400d8fabcdc8?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| VWO 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 VWO 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:\/\/vwo.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| VWO 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 VWO Visual Editor","og_url":"https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/","og_site_name":"VWO Product Updates","article_published_time":"2020-11-20T17:48:16+00:00","article_modified_time":"2025-01-30T06:07:27+00:00","og_image":[{"width":1424,"height":786,"url":"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/13\/2020\/11\/Add-html-vwo-footer.png","type":"image\/png"}],"author":"Sathyajith Vijayakumar","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#article","isPartOf":{"@id":"https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/"},"author":{"name":"Sathyajith Vijayakumar","@id":"https:\/\/vwo.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:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/"},"wordCount":539,"commentCount":0,"image":{"@id":"https:\/\/vwo.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":["VWO Testing","VWO Web Rollouts"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/","url":"https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/","name":"Introduce New Content on the Page using HTML| VWO Product Updates","isPartOf":{"@id":"https:\/\/vwo.com\/product-updates\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#primaryimage"},"image":{"@id":"https:\/\/vwo.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:\/\/vwo.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 VWO Visual Editor","breadcrumb":{"@id":"https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vwo.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:\/\/vwo.com\/product-updates\/introduce-new-content-on-the-page-using-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vwo.com\/product-updates\/"},{"@type":"ListItem","position":2,"name":"Introduce New Content on the Page using HTML"}]},{"@type":"WebSite","@id":"https:\/\/vwo.com\/product-updates\/#website","url":"https:\/\/vwo.com\/product-updates\/","name":"VWO Product Updates","description":"Just another VWO site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vwo.com\/product-updates\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/vwo.com\/product-updates\/#\/schema\/person\/c7749fc56afdfa5dd54b5be40818cfa5","name":"Sathyajith Vijayakumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vwo.com\/product-updates\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/067196409673f840322b0a84a2b9177566057677bff3e239367e400d8fabcdc8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/067196409673f840322b0a84a2b9177566057677bff3e239367e400d8fabcdc8?s=96&d=mm&r=g","caption":"Sathyajith Vijayakumar"}}]}},"_links":{"self":[{"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/posts\/629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/users\/275"}],"replies":[{"embeddable":true,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/comments?post=629"}],"version-history":[{"count":16,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/posts\/629\/revisions"}],"predecessor-version":[{"id":3290,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/posts\/629\/revisions\/3290"}],"wp:attachment":[{"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/media?parent=629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/categories?post=629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/tags?post=629"},{"taxonomy":"feature","embeddable":true,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/feature?post=629"},{"taxonomy":"industry-type","embeddable":true,"href":"https:\/\/vwo.com\/product-updates\/wp-json\/wp\/v2\/industry-type?post=629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}