{"id":6386,"date":"2018-12-13T16:07:03","date_gmt":"2018-12-13T16:07:03","guid":{"rendered":"https:\/\/dev.popcomms.com\/pop?p=6386&#038;preview=true&#038;preview_id=6386"},"modified":"2022-03-01T11:10:41","modified_gmt":"2022-03-01T11:10:41","slug":"how-to-develop-interactive-experiences-advanced","status":"publish","type":"post","link":"https:\/\/dev.popcomms.com\/pop\/how-to-develop-interactive-experiences-advanced\/","title":{"rendered":"Advanced Manufacturing: How to Develop Interactive Sales Experiences to WOW Your Customers"},"content":{"rendered":"\n<p>Are you looking for an innovative and immersive way to bring your&nbsp;products and services to life for your customers? Maybe a touchscreen experience for an event, tradeshow or marketing suite or a <a rel=\"noreferrer noopener\" href=\"https:\/\/dev.popcomms.com\/pop\/sales-enablement-tools\/\" target=\"_blank\">sales enablement tool<\/a> or interactive presentation to help close a deal at a sales meeting?<\/p>\n\n\n\n<p>Perhaps you already think an interactive <a href=\"https:\/\/dev.popcomms.com\/pop\/touchscreen-experiences\/\" target=\"_blank\" rel=\"noreferrer noopener\">touchscreen experience <\/a>is a good idea, but you&#8217;re not sure how to go about it or what&#8217;s needed to develop one.<\/p>\n\n\n\n<p>The benefits of interactive experiences in enhancing the customers&#8217; buying experience and focusing in on the value and opportunities you create for customers on top of the WOW factor they generate is well known. You can read more about how they improve the buyer experience or journey in this <a rel=\"noopener\" href=\"https:\/\/dev.popcomms.com\/pop\/blog\/interactive-touchscreens-can-effective-presentation-tool-engineering-firms\/\" target=\"_blank\">article<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/Sales-enablement-presentation-healthcare-Coloplast-popcomms-2-1024x640.jpg\" alt=\"\" class=\"wp-image-219\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/Sales-enablement-presentation-healthcare-Coloplast-popcomms-2-1024x640.jpg 1024w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/Sales-enablement-presentation-healthcare-Coloplast-popcomms-2-300x188.jpg 300w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/Sales-enablement-presentation-healthcare-Coloplast-popcomms-2-768x480.jpg 768w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/Sales-enablement-presentation-healthcare-Coloplast-popcomms-2.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>The sales enablement tool for Medical Device manufacturer <a href=\"https:\/\/dev.popcomms.com\/pop\/case-studies\/coloplast-sales-tool\/\" target=\"_blank\" rel=\"noreferrer noopener\">Coloplast<\/a> was Shortlisted for a B2B Martech Award <\/figcaption><\/figure>\n\n\n\n<p>The development process itself will vary depending on the agency you choose to work with, however, as touchscreen specialists, what we can do is talk you through the main process steps, so you can have a better idea of what to expect.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"color: #f2168f;\">First things first though&#8230;<\/span><\/h2>\n\n\n\n<p>There are a lot of factors to take into account when delving into the world of touchscreen experiences, interactive sales presentations and sales enablement tools &#8211; and you should begin the initial thought process before you even contact an agency.<\/p>\n\n\n\n<p>Firstly, and most important of all &#8211; what are your goals and objectives that you think an interactive experience will help with &#8211; what can one help you achieve? What does success look like to you, and do you definitely need a touchscreen or sales enablement tool to achieve that success?<\/p>\n\n\n\n<p>Sounds like a few simple questions but the answers will dictate how the whole experience is designed and built, from the messaging to the content to the type of experience you create for your customers.<\/p>\n\n\n\n<p>Next, consider how your goals line up with those of your customers. Your customers will have their own agenda and objectives and ultimately you want to meet their needs by giving them what they want and at the same time getting what you need from them.<\/p>\n\n\n\n<p>Underpinning this will be how you weave the value and opportunities you create for your customers into the messaging and how we build these around your customer so the messaging is customer-centric.<\/p>\n\n\n\n<p>In other words, how can you create an experience they&#8217;re going to want to use in the first place, and how will it then persuade them to take the actions you need?<\/p>\n\n\n\n<p>We\u2019ve refined our development process over many years from working with businesses across many sectors. This is the most crucial part of the entire exercise. So much so, we\u2019ve even registered our own methodology for conducting this phase, it\u2019s that important to get it right. We call it the <a rel=\"noreferrer noopener\" href=\"https:\/\/dev.popcomms.com\/pop\/why-the-discovery-phase-is-the-most-important-element-to-developing-a-successful-sales-enablement-tool\/\" target=\"_blank\">Customer-First Blueprint\u00ae.<\/a> We conduct a workshop to discover the answers to the questions above, involving every group who will be using the interactive experience. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span style=\"color: #f2168f;\">Sitemap, storyboard and design mock-ups<\/span><\/h2>\n\n\n\n<p>Once the objectives are written down, agreed and firmly imprinted in your mind it is then possible to move to the next steps.<\/p>\n\n\n\n<p>The next stage is creating a sitemap of the experience, which might look similar to the example below. This is where you map out your content &#8211; these are your sales and marketing assets, the overall narrative flow and user experience (UX) of the interactive. It will show your main areas or chapter headings and what the subpages may be within those. This will give you an easy snapshot of the whole experience and a great way to ensure you&#8217;ve captured all the key content areas that need to be included.<\/p>\n\n\n\n<p>It will also help you to see if you&#8217;re going to be able to meet yours and your customers&#8217; objectives. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/07\/POPcomms-Sitemap-1024x683-2.jpg\" alt=\"\" class=\"wp-image-10989\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/07\/POPcomms-Sitemap-1024x683-2.jpg 1024w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/07\/POPcomms-Sitemap-1024x683-2-300x200.jpg 300w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/07\/POPcomms-Sitemap-1024x683-2-768x512.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>An example of a sitemap for an interactive sales experience<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #f2168f;\">Storyboards<\/span><\/h3>\n\n\n\n<p>Once you&#8217;ve finalised your sitemap, you can begin work on the storyboards. A storyboard should essentially be a black and white prototype of your touchscreen experience. It&#8217;s not focused on design at this stage &#8211; it simply lays out the content to go in the final experience according to the sections in your sitemap and helps you review the layout, structure and navigation.<\/p>\n\n\n\n<p>Looking at the storyboards should be able to give you a better idea of whether there&#8217;s enough space for your content, whether it tells the right story in the right order and whether the experience is easy for users to navigate?<\/p>\n\n\n\n<p>Sometimes storyboards will be interactive, so you can look at it from the perspective of someone viewing the final experience, so you can consider the journey they&#8217;ll be taken on. We always find this is helpful as it gives a better idea of the overall functionality of the interactive.<\/p>\n\n\n\n<p>Storyboards will also start to show the overall visual theme and whether there will be central visuals that the experience can be built around.<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">As a typical rule of thumb, sitemaps take a day&nbsp;to produce, whereas storyboards can take roughly 1-2 weeks.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #f2168f;\">Design mock-ups<\/span><\/h3>\n\n\n\n<p>Once the storyboard has been worked on this is when design can start. Using the storyboard this is where we would start to bring in our client&#8217;s branding and start to visualise what the final experience will look like.<\/p>\n\n\n\n<p>These design mockups can be reviewed by clients before the design is rolled out across the entire experience to create all the assets.<\/p>\n\n\n\n<p>The design stage should take roughly 1 &#8211; 2 weeks<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #f2168f;\">5. Full design and development <\/span><\/h3>\n\n\n\n<p>Only after you&#8217;ve approved the sitemap,&nbsp; storyboard, initial mockups, content and design visuals is it time to begin the final design and development stage of your interactive touchscreen experience.<\/p>\n\n\n\n<p>This is where our developers translate the UX, content and designs into a final interactive experience. It&#8217;s important to get these first stages right as making changes at this stage can be time-consuming and costly as it is much harder to change elements at the development stage.<\/p>\n\n\n\n<p>We would also discuss how the experience can be updated by the customer over time, do they need a content management system and whether it needs to work both offline and online and what kind of devices it has to work on &#8211; such as a large touchscreen and maybe on smaller tablets.<\/p>\n\n\n\n<p>Depending on the complexity of your touchscreen experience, the development time could take 4 &#8211; 8 weeks.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #f2168f;\">6. Final review and delivery<\/span><\/h3>\n\n\n\n<p>Hurrah &#8211; your finished interactive experience is now ready for you to try and test out! You should leave plenty of time for testing and making any last-minute changes before giving your final seal of approval.<\/p>\n\n\n\n<p>You will also need to consider the hardware and installation such as the type and size of the screen as well as the PC that is needed to run the experience.<\/p>\n\n\n\n<p>Our advice is to allow for 1 &#8211; 2 weeks to cover final review and delivery, as you&#8217;ll want to be certain your experience is working smoothly and as planned.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #f2168f;\">One final piece of advice<\/span><\/h3>\n\n\n\n<p>Perhaps you can tell, but the biggest point we wanted to get across to you in this article is that the initial planning and scoping stages are absolutely essential when it comes to developing your interactive touchscreen experience.<\/p>\n\n\n\n<p>If you don&#8217;t identify early on what your objectives are and what success looks like to you &#8211; along with the messaging and content you want to be included &#8211; then you could end up with something that&#8217;s poorly planned and not the right fit for what you&#8217;re trying to achieve.<\/p>\n\n\n\n<p>As an example, we needed to do some careful planning in <a href=\"https:\/\/dev.popcomms.com\/pop\/case-studies\/gsma-interactive-hub\/\"><span style=\"font-weight: 400;\">the development of an interactive content-hub for GSMA<\/span><\/a><span style=\"font-weight: 400;\">, as we knew they needed a simple and accessible way for their own staff to regularly update the experience with fresh content.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/four-1024x640.jpg\" alt=\"\" class=\"wp-image-8160\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/four-1024x640.jpg 1024w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/four-300x188.jpg 300w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/four-768x480.jpg 768w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/four-1536x960.jpg 1536w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/four.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The touchscreen solution for GSMA also needed to be implemented across multiple venues around the world &#8211; each with their own WiFi connectivity. This meant factoring in security along with analytics to determine how users were reacting to content and seeing which features were proving most popular.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"color: #f2168f;\">Conclusion<\/span><\/h3>\n\n\n\n<p>Hopefully, we&#8217;ve managed to shed some light on the typical process involved when it comes to developing an interactive touchscreen experience.<\/p>\n\n\n\n    <div class=\"container-wide\">\n    <div\n      is=\"download\"\n      inline-template\n      id=\"download-form\"\n    >\n      <div class=\"download-form-container\"  data-email-title=\"\" data-email-image=\"\" data-email-file=\"\">\n        <div class=\"border-2 \">\n          <div class=\"sm:hidden block relative\" style=\"padding-bottom: 100%;\">\n            <div\n              class=\"absolute top-0 left-0 w-full h-full bg-no-repeat bg-center bg-cover\"\n              style=\"background-image: url(https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/touchtable-touchscreen-interactive-presentations-multitouch-popcomms-1.jpg)\"\n            ><\/div>\n          <\/div>\n          <div\n            ref=\"downloadForm\"\n            name=\"download_form\"\n            method=\"post\"\n            action=\"\"\n            onsubmit=\"return false\"\n            class=\"download-form w-full relative\"\n          >\n            <transition name=\"fade\">\n              <div\n                v-show=\"step !== 1\"\n                class=\"absolute flex flex-col top-0 left-0 w-full h-full shadow-md bg-pop-black\"\n                style=\"z-index: 1;\"\n              ><\/div>\n            <\/transition>\n            <div ref=\"downloadFormStep1\">\n              <div class=\"md:grid md:grid-cols-2\">\n  <div class=\"hidden md:block relative\" style=\"padding-bottom: 100%;\">\n    <div\n      class=\"absolute top-0 left-0 w-full h-full bg-no-repeat bg-center bg-cover\"\n      style=\"background-image: url(https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/touchtable-touchscreen-interactive-presentations-multitouch-popcomms-1.jpg)\"\n    ><\/div>\n  <\/div>\n  <div class=\"flex flex-col\">\n    <div class=\"h-2\/5 bg-pop-pink text-pop-white p-6 lg:px-8 flex flex-col justify-center\">\n      <h3 class=\"font-semibold text-xl lg:text-2xl\">Download guide<\/h3>\n    <\/div>\n    <div class=\"h-3\/5 flex flex-col justify-between bg-pop-black\" >\n      <div class=\"flex items-center lg:text-lg h-full p-6 lg:px-8 text-pop-white\">\n        Download our guide to creating immersive touchscreen experiences\n      <\/div>\n      <div\n        class=\"flex justify-end cursor-pointer\"\n        @click=\"nextStep()\"\n      >\n        <div class=\"bg-pop-black text-pop-white text-pop-white m-0 px-4 py-2 h-10 leading-0\">\n          Download\n        <\/div>\n        <div class=\"w-10 h-10 p-2 bg-pop-navy\">\n          <svg class=\"w-full absolute left-1\/2 top-1\/2 -translate-y-1\/2 -translate-x-1\/2 transform rotate-90 text-pop-white\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n            <path\n              class=\"fill-current text-pop-pink\"\n              d=\"M13.0607 0.625645C12.4749 0.0398579 11.5251 0.0398579 10.9393 0.625645L1.3934 10.1716C0.807611 10.7574 0.807611 11.7071 1.3934 12.2929C1.97919 12.8787 2.92893 12.8787 3.51472 12.2929L12 3.80762L20.4853 12.2929C21.0711 12.8787 22.0208 12.8787 22.6066 12.2929C23.1924 11.7071 23.1924 10.7574 22.6066 10.1716L13.0607 0.625645ZM13.5 24.3137V1.6863H10.5V24.3137H13.5Z\"\n              fill=\"currentColor\"\n            \/>\n          <\/svg>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n            <\/div>\n            <div\n              ref=\"downloadFormStep2\"\n              v-show=\"step === 2\"\n              class=\"absolute flex flex-col top-0 left-0 w-full h-full p-3 sm:p-10  text-pop-white z-10\"\n            >\n              <div class=\"text-sm mb-4\">1 \/ 3<\/div>\n              <div class=\"w-full md:w-5\/6 form-text leading-tight text-base sm:text-xl md:text-xl\">\n  We just need some details to get you started. Please enter your <span class=\"text-pop-yellow\">first name<\/span> and <span class=\"text-pop-yellow\">surname<\/span>.\n<\/div>\n<div class=\"flex-grow flex flex-col justify-center\">\n  <div class=\"my-2 sm:my-4\">\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"first_name\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white \"\n        type=\"text\"\n        v-model=\"form.firstName.value\"\n        placeholder=\"First name *\"\n        @keyup.prevent=\"validateFirstName\"\n      >\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.firstName.valid)\" style=\"height: 2px;\"\n  ><\/div>\n  <\/div>\n  <\/div>\n  <div class=\"my-2 sm:my-4\">\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"last_name\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white pr-12\"\n        type=\"text\"\n        v-model=\"form.lastName.value\"\n        placeholder=\"Surname *\"\n        @keyup.prevent=\"validateLastName\"\n      >\n            <svg @click=\"validateLastName\" class=\"absolute h-8 sm:h-auto top-1\/2 transform -translate-y-1\/2 right-0 cursor-pointer fill-current text-pop-white hover:text-pop-pink transition-colors\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M36.3746 25.0607C36.9604 24.4749 36.9604 23.5251 36.3746 22.9393L26.8287 13.3934C26.2429 12.8076 25.2931 12.8076 24.7073 13.3934C24.1216 13.9792 24.1216 14.9289 24.7073 15.5147L33.1926 24L24.7073 32.4853C24.1216 33.0711 24.1216 34.0208 24.7073 34.6066C25.2931 35.1924 26.2429 35.1924 26.8287 34.6066L36.3746 25.0607ZM12.6865 25.5L35.3139 25.5L35.3139 22.5L12.6865 22.5L12.6865 25.5Z\"\/>\n      <\/svg>\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.lastName.valid)\" style=\"height: 2px;\"\n  ><\/div>\n      <div class=\"hidden sm:block input-guide opacity-0 absolute -bottom-2 right-0 text-sm pt-1 text-right transform translate-y-full text-pop-white\">click or hit enter<\/div>\n  <\/div>\n  <\/div>\n<\/div>\n            <\/div>\n            <div\n              ref=\"downloadFormStep3\"\n              v-show=\"step === 3\"\n              class=\"absolute flex flex-col top-0 left-0 w-full h-full p-3 sm:p-10 bg-pop-black text-pop-white z-10\"\n            >\n              <div class=\"text-sm mb-4\">2 \/ 3<\/div>\n              <div class=\" form-text w-full sm:w-4\/6 leading-tight text-base sm:text-xl md:text-xl\">\n  And now just your <span class=\"text-pop-yellow\">email<\/span> &amp; <span class=\"text-pop-yellow\">company name<\/span>, please.\n<\/div>\n<div class=\"flex-grow flex flex-col justify-center\">\n  <div class=\"my-2 sm:my-4\">\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"email\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white \"\n        type=\"email\"\n        v-model=\"form.email.value\"\n        placeholder=\"Your email *\"\n        @keyup.prevent=\"validateEmail\"\n      >\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.email.valid)\" style=\"height: 2px;\"\n  ><\/div>\n  <\/div>\n  <\/div>\n  <div class=\"my-2 sm:my-4\">\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"company\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white pr-12\"\n        type=\"text\"\n        v-model=\"form.company.value\"\n        placeholder=\"Company *\"\n        @keyup.prevent=\"validateCompany\"\n      >\n            <svg @click=\"validateCompany\" class=\"absolute h-8 sm:h-auto top-1\/2 transform -translate-y-1\/2 right-0 cursor-pointer fill-current text-pop-white hover:text-pop-pink transition-colors\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <path d=\"M36.3746 25.0607C36.9604 24.4749 36.9604 23.5251 36.3746 22.9393L26.8287 13.3934C26.2429 12.8076 25.2931 12.8076 24.7073 13.3934C24.1216 13.9792 24.1216 14.9289 24.7073 15.5147L33.1926 24L24.7073 32.4853C24.1216 33.0711 24.1216 34.0208 24.7073 34.6066C25.2931 35.1924 26.2429 35.1924 26.8287 34.6066L36.3746 25.0607ZM12.6865 25.5L35.3139 25.5L35.3139 22.5L12.6865 22.5L12.6865 25.5Z\"\/>\n      <\/svg>\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.company.valid)\" style=\"height: 2px;\"\n  ><\/div>\n      <div class=\"hidden sm:block input-guide opacity-0 absolute -bottom-2 right-0 text-sm pt-1 text-right transform translate-y-full text-pop-white\">click or hit enter<\/div>\n  <\/div>\n  <\/div>\n<\/div>\n            <\/div>\n            <div\n              ref=\"downloadFormStep4\"\n              v-show=\"step === 4\"\n              class=\"absolute flex flex-col top-0 left-0 w-full h-full p-3 sm:p-10 bg-pop-black text-pop-white z-10\"\n            >\n              <div class=\"text-sm mb-4\">3 \/ 3<\/div>\n              <div class=\"w-1\/2 form-text opacity-0 sm:mb-12 leading-tight text-base sm:text-xl md:text-xl\">\n  Brill! Are you a human?\n  Prove it by simply entering the answer to <span class=\"text-pop-yellow\" v-html=\"captcha.a\"><\/span> <span class=\"text-pop-yellow\">+<\/span> <span class=\"text-pop-yellow\" v-html=\"captcha.b\"><\/span>\n<\/div>\n<div class=\"grid grid-cols-2 auto-cols-auto space-x-4 my-4\">\n  <div>\n    <div class=\"input-box relative w-full\">\n  <div class=\"relative overflow-hidden\">\n    <div class=\"input-content transform translate-y-full\">\n      <input\n        name=\"captcha\"\n        class=\"w-full font-normal text-lg sm:text-2xl bg-pop-black text-pop-white \"\n        type=\"text\"\n        v-model=\"form.captcha.value\"\n        placeholder=\"Your answer?\"\n        @keyup.prevent=\"validateCaptcha\"\n      >\n          <\/div>\n  <\/div>\n\n  <div\n    class=\"input-border absolute top-full left-0 transition-colors duration-300\" :class=\"validationHighlight(form.captcha.valid)\" style=\"height: 2px;\"\n  ><\/div>\n  <\/div>\n  <\/div>\n<\/div>\n<div class=\"form-text flex opacity-0 text-xs\">\n  <div>\n    By submitting this form you agree to POPcomms <a class=\"text-pop-pink underline\" href=\"https:\/\/dev.popcomms.com\/pop\/privacy-policy\" target=\"_blank\">Privacy Policy<\/a>\n  <\/div>\n<\/div>\n<div\n  class=\"absolute bottom-0 right-0 flex justify-center cursor-pointer\"\n  @click=\"submit\"\n>\n  <div class=\"bg-pop-purple text-pop-white m-0 px-4 py-3 h-12 leading-0\">\n    Submit\n  <\/div>\n  <div class=\"w-12 h-12 p-2 bg-white flex items-center justify-center\">\n    <svg class=\"transform rotate-90 text-pop-purple\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n      <path\n        class=\"fill-current\"\n        d=\"M13.0607 0.625645C12.4749 0.0398579 11.5251 0.0398579 10.9393 0.625645L1.3934 10.1716C0.807611 10.7574 0.807611 11.7071 1.3934 12.2929C1.97919 12.8787 2.92893 12.8787 3.51472 12.2929L12 3.80762L20.4853 12.2929C21.0711 12.8787 22.0208 12.8787 22.6066 12.2929C23.1924 11.7071 23.1924 10.7574 22.6066 10.1716L13.0607 0.625645ZM13.5 24.3137V1.6863H10.5V24.3137H13.5Z\"\n        fill=\"currentColor\"\n      \/>\n    <\/svg>\n  <\/div>\n<\/div>\n<div class=\"hidden sm:block absolute top-0 right-0 w-1\/2 pointer-events-none\">\n  <svg class=\"watching-eye w-full\" preserveAspectRatio=\"xMidYMid meet\"  viewBox=\"0 0 496 369\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n    <rect class=\"lines\" y=\"-123.89\" width=\"496\" height=\"245.916\" fill=\"url(#pattern5)\"\/>\n    <clipPath id=\"irisclipPath5\">\n      <path class=\"eye-mask\" style=\"transform-origin: 50% 32%;\" d=\"M0 122.813C58.13 49.7951 147.621 3.01562 248 3.01562C348.379 3.01562 437.87 49.7951 496 122.813C437.87 195.83 348.379 242.61 248 242.61C147.621 242.61 58.13 195.83 0 122.813Z\" fill=\"black\"\/>\n    <\/clipPath>\n    <rect fill=\"white\" style=\"clip-path: url(#irisclipPath5)\" class=\"lines\" y=\"0\" width=\"496\" height=\"245.916\"\/>\n    <!-- <path style=\"clip-path: url(#irisclipPath5)\" d=\"M0 122.813C58.13 49.7951 147.621 3.01562 248 3.01562C348.379 3.01562 437.87 49.7951 496 122.813C437.87 195.83 348.379 242.61 248 242.61C147.621 242.61 58.13 195.83 0 122.813Z\" fill=\"white\"\/> -->\n    <ellipse class=\"iris\" style=\"clip-path: url(#irisclipPath5)\" cx=\"247.653\" cy=\"121.806\" rx=\"101.771\" ry=\"102.118\" fill=\"#6F62FF\"\/>\n    <ellipse class=\"pupil\" style=\"clip-path: url(#irisclipPath5)\" cx=\"244.924\" cy=\"78.2744\" rx=\"35.4286\" ry=\"35.4286\" fill=\"#F8F7EE\"\/>\n    <defs>\n      <pattern id=\"pattern5\" patternContentUnits=\"objectBoundingBox\" width=\"0.0241935\" height=\"0.0487972\">\n        <use xlink:href=\"#image0\" transform=\"scale(0.00201613 0.00406643)\"\/>\n      <\/pattern>\n      <image id=\"image0\" width=\"12\" height=\"12\" xlink:href=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA8SURBVHgB7dGxDQAgCATAdytjwWqwDzuqaBzg7SggITTHN99AzBC3ODoBo3Ds6uJaOAl+DzS+jf\/gE74Bfmo++ZWcm1wAAAAASUVORK5CYII=\"\/>\n    <\/defs>\n  <\/svg>\n<\/div>\n            <\/div>\n            <div\n              ref=\"downloadFormStep5\"\n              v-show=\"step === 5\"\n              class=\"absolute top-0 left-0 w-full h-full p-3 sm:p-10 bg-pop-black text-pop-white z-10\"\n            >\n              <div class=\"text-sm p-3 sm:p-10\">Complete<\/div>\n              <div class=\"grid md:grid-cols-2\">\n  <div class=\"flex flex-col form-text justify-center text-xl p-6\">\n    <div>\n      Thanks, <span class=\"text-pop-yellow\">all done!<\/span><br>\n      Check your email to find your guide.\n    <\/div>\n  <\/div>\n<\/div>\n\n  <svg class=\"hidden md:block absolute right-0 top-1\/2 transform -translate-y-1\/2\" width=\"408\" height=\"336\" viewBox=\"0 0 408 336\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n    <path class=\"finger stroke-current text-pop-black\" stroke-width=\"2\" d=\"M83.8623 99.4615C83.8623 80.9476 99.1777 65.9391 118.07 65.9391L542.543 65.9392C561.436 65.9392 576.751 80.9477 576.751 99.4616C576.751 117.975 561.436 132.984 542.543 132.984L118.07 132.984C99.1776 132.984 83.8623 117.975 83.8623 99.4615Z\" fill=\"#6F62FF\"\/>\n    <path class=\"finger stroke-current text-pop-black\" stroke-width=\"2\" d=\"M197.889 166.867C197.889 148.154 213.369 132.984 232.464 132.984L542.175 132.984C561.271 132.984 576.751 148.154 576.751 166.867C576.751 185.58 561.271 200.75 542.175 200.75L232.464 200.75C213.369 200.75 197.889 185.58 197.889 166.867Z\" fill=\"#6F62FF\"\/>\n    <path class=\"finger stroke-current text-pop-black\" stroke-width=\"2\" d=\"M216.28 234.632C216.28 215.92 231.76 200.75 250.856 200.75L542.176 200.75C561.271 200.75 576.751 215.92 576.751 234.633C576.751 253.346 561.271 268.515 542.176 268.515L250.856 268.515C231.76 268.515 216.28 253.345 216.28 234.632Z\" fill=\"#6F62FF\"\/>\n    <path class=\"finger stroke-current text-pop-black\" stroke-width=\"2\" d=\"M233.937 302.038C233.937 283.524 249.252 268.515 268.144 268.515L542.544 268.515C561.436 268.515 576.752 283.524 576.752 302.038C576.752 320.552 561.436 335.56 542.544 335.56L268.144 335.56C249.252 335.56 233.937 320.552 233.937 302.038Z\" fill=\"#6F62FF\"\/>\n    <path class=\"hand\"d=\"M379.105 137.017C379.105 97.7617 411.579 65.9391 451.637 65.9391H487.545C527.603 65.9391 560.077 97.7618 560.077 137.017V264.483C560.077 303.738 527.603 335.56 487.545 335.56H451.637C411.579 335.56 379.105 303.738 379.105 264.482V137.017Z\" fill=\"#6F62FF\"\/>\n    <path class=\"waves opacity-0 origin-center\" d=\"M130.346 184.698C118.12 186.375 105.723 185.501 93.9727 182.131C82.2223 178.761 71.3854 172.974 62.1767 165.149C52.9679 157.325 45.5964 147.641 40.5482 136.738C35.5 125.834 32.8898 113.957 32.8897 101.891C32.8896 89.825 35.4995 77.8432 40.5475 66.736C45.5954 55.6287 52.9667 45.6481 62.1753 37.4524C71.3839 29.2566 82.2207 23.0319 93.971 19.1886C105.721 15.3452 118.118 13.9706 130.345 15.1553L128.988 26.3128C118.367 25.2836 107.598 26.4777 97.3901 29.8165C87.1825 33.1552 77.7686 38.5627 69.769 45.6823C61.7695 52.802 55.366 61.4721 50.9808 71.1211C46.5956 80.77 44.3283 91.1786 44.3285 101.661C44.3286 112.142 46.5961 122.46 50.9815 131.932C55.3668 141.404 61.7705 149.816 69.7702 156.613C77.7699 163.41 87.1839 168.438 97.3915 171.365C107.599 174.292 118.369 175.052 128.99 173.595L130.346 184.698Z\" fill=\"#3A3EAB\"\/>\n    <path class=\"waves opacity-0 origin-center\" d=\"M121.559 160.297C104.817 160.599 88.7233 154.419 76.8186 143.116C64.914 131.814 58.1735 116.315 58.08 100.029C57.9866 83.7426 64.5478 68.0036 76.3203 56.2741C88.0928 44.5445 104.112 37.7853 120.854 37.4833L120.916 48.2672C107.114 48.5161 93.9081 54.0884 84.203 63.758C74.4979 73.4277 69.089 86.4027 69.166 99.8287C69.2431 113.255 74.7998 126.032 84.6138 135.349C94.4279 144.667 107.695 149.762 121.497 149.513L121.559 160.297Z\" fill=\"#3A3EAB\"\/>\n  <\/svg>\n                <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  \n\n\n<p>Always remember, the experience is not about you it is about your customers, they have to be at the heart of the story and it must revolve around, you can then build your value proposition around them.<\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Want to know more about our sales enablement tool and touchscreen development process? If so, feel free to get in touch with us using the handy contact form below &#8211; we\u2019re always happy to answer any questions you might have!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you looking for an innovative and immersive way to bring your&nbsp;products and services to life for your customers? Maybe a touchscreen experience for an event, tradeshow or marketing suite or a sales enablement tool or interactive presentation to help close a deal at a sales meeting? Perhaps you already think an interactive touchscreen experience [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":737,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[23,4],"tags":[262,112,113,359,285,358,264,98,136,355,160,125,287,170],"class_list":["post-6386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sales-enablement","category-touchscreens","tag-b2b-martech-awards","tag-b2b-presentations","tag-b2b-sales","tag-buyer-experience","tag-buyers-journey","tag-close-deals","tag-cms","tag-interactive-content","tag-interactive-sales-experiences","tag-sales-assets","tag-sales-enablement-platform","tag-sales-tool","tag-storyboard","tag-touchscreens-for-events"],"acf":[],"_links":{"self":[{"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/posts\/6386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/comments?post=6386"}],"version-history":[{"count":0,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/posts\/6386\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/media\/737"}],"wp:attachment":[{"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/media?parent=6386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/categories?post=6386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/tags?post=6386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}