{"id":7357,"date":"2021-06-18T11:40:32","date_gmt":"2021-06-18T10:40:32","guid":{"rendered":"https:\/\/dev.popcomms.com\/pop\/?p=7357"},"modified":"2021-12-13T09:36:00","modified_gmt":"2021-12-13T09:36:00","slug":"how-much-should-an-interactive-touchscreen-solution-cost","status":"publish","type":"post","link":"https:\/\/dev.popcomms.com\/pop\/how-much-should-an-interactive-touchscreen-solution-cost\/","title":{"rendered":"How Much Should an Interactive Touchscreen Solution Cost?"},"content":{"rendered":"\n<p>Are you looking to develop an interactive <a rel=\"noreferrer noopener\" href=\"https:\/\/dev.popcomms.com\/pop\/touchscreen-experiences\/\" target=\"_blank\">touchscreen experience<\/a> to showcase your business at an event, exhibition or tradeshow? Or perhaps you want an interactive sales tool on a touchscreen in a demo area, showroom, customer centre or marketing suite to help demonstrate your products and ultimately improve sales? <\/p>\n\n\n\n<p>Then in this blog we&#8217;ll take you through the costs and the many different options that are available for all budgets. We&#8217;ll also introduce you to how we can help you every step of the way.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"has-inline-color has-pop-pink-color\">What is a touchscreen experience?&nbsp;&nbsp;<\/span><\/h2>\n\n\n\n<p>Before we go any further, let\u2019s first outline what is needed for a touchscreen experience.<\/p>\n\n\n\n<p>Firstly, there is the physical touchscreen which people touch and interact with and then you also need a PC to run the software that displays the visual experience on the screen.&nbsp;&nbsp;<\/p>\n\n\n\n<p>The second part is the visual experience, so what you see and interact with on screen and this experience needs to be run by software and there are different applications that do this.<\/p>\n\n\n\n<p>Thirdly, that same visual experience needs to be created in the first place and again there are different software applications (here\u2019s a <strong><em><a href=\"https:\/\/dev.popcomms.com\/pop\/which-software-can-i-use-to-create-an-interactive-touchscreen-experience\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"has-inline-color has-pop-pink-color\">blog<\/span><\/a><\/em><\/strong> we&#8217;ve written on the software used to create touchscreen experiences) out there to develop touchscreen experiences.<\/p>\n\n\n\n<p>A good analogy is your PC and monitor at work that you browse the internet with. The monitor would be the touchscreen, the PC has all the software that displays on the monitor and the webpage is the visual experience you interact with. Then that webpage has been created either by being coded in HTML or a special application has been used to create it.<\/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=\"Here's your guide to creating immersive touchscreen experiences.\" data-email-image=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/07\/Touchscreen-cover.jpg\" data-email-file=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/07\/POP_Beginners-guide-to-touchscreens.pdf\">\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\/06\/touchscreen-interactive-multitouch-technology-touchtable-arm-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\/06\/touchscreen-interactive-multitouch-technology-touchtable-arm-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<h2 class=\"wp-block-heading\"><span class=\"has-inline-color has-pop-pink-color\">How much will it cost?&nbsp;&nbsp;<\/span><\/h2>\n\n\n\n<p>So, you&#8217;re hoping to develop a touchscreen experience for an event or an exhibition, or perhaps you&#8217;d like an interactive experience for a customer sales suite? But you&#8217;re unsure how much it will cost. Broadly speaking a touchscreen experience can be broken down into the three parts mentioned above and each has an associated cost. <\/p>\n\n\n\n<p>There will be a huge difference in cost depending on factors that we\u2019ll highlight below. It won&#8217;t cover everything, but we\u2019ll be able to give you a reasonable idea of your investment. One other factor to consider is whether you get an agency to create the touchscreen experience for you or if you develop it internally, this will have a big impact on your costs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"has-inline-color has-pop-pink-color\">What are your hardware options?&nbsp;<\/span><\/h2>\n\n\n\n<p>For the screens there are several different types: &nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Wall-mounted &nbsp;<\/li><li>Freestanding &nbsp;<\/li><li>Touch tables &nbsp;<\/li><li>Handheld (basically tablets) &nbsp;<\/li><\/ul>\n\n\n\n<p>Which option is best for you will depend upon where you are going to be using your experience and who will be using it. <\/p>\n\n\n\n<p class=\"has-pop-gray-background-color has-background\">Read our blog: <a href=\"https:\/\/dev.popcomms.com\/pop\/5-best-hardware-options-interactive-display-solutions\/\" data-type=\"post\" data-id=\"4967\" target=\"_blank\" rel=\"noreferrer noopener\">5 of the Best Hardware Options for Interactive Display Solutions<\/a>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"has-inline-color has-pop-pink-color\">Different screen technologies<\/span><\/h3>\n\n\n\n<p>There are also different types of screen to be aware of.<\/p>\n\n\n\n<p>Resolution is important, you can get standard HD screens, 4k screens and even 8k screens (I\u2019m not going to talk about these as they are too expensive). The price difference between HD and 4K isn\u2019t huge and we\u2019d always recommend going for a higher quality screen if possible, so 4K all the way. Practically what it means is that text and images will be sharper on a 4k screen making them easier to read and clearer.<\/p>\n\n\n\n<p>The other difference is in the way the screen recognises touch and there are two main types here. Infra-Red and PCAP (projective capacitive screen). iPads and most tablets use PCAP, it\u2019s more sensitive and accurate and has a completely flat glass screen so looks really nice.<\/p>\n\n\n\n<p>Infra-Red is an older technology, the only benefit to it is that you can wear gloves to use the screen or use any object to interact with it as it doesn\u2019t rely on your finger touching the screen. You also get a bezel with these screens, e.g., a raised outer edge so they don\u2019t look as sleek. Where possible we always recommend PCAP.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Wall mounted <\/h3>\n\n\n\n<p>Wall-mounted screens are good if you have limited space but they have to be fixed into place and can get tiring for users if your experience takes time to explore, imagine holding your arm up for 5 minutes! You also have to be careful of the size you go for as people have to be able to touch all parts of the screen. If it\u2019s too high people won\u2019t be able to reach the top of the screen. For disabled people who might be in wheelchairs, these will be almost impossible to use.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"609\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/touchscreen-interactive-bmw-4-1024x609.jpg\" alt=\"Two visitors using an interactive Touchscreen experience developed for BMW   \" class=\"wp-image-467\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/touchscreen-interactive-bmw-4-1024x609.jpg 1024w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/touchscreen-interactive-bmw-4-300x179.jpg 300w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/touchscreen-interactive-bmw-4-768x457.jpg 768w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/touchscreen-interactive-bmw-4-1536x914.jpg 1536w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/05\/touchscreen-interactive-bmw-4.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Visitors were invited to customise car models on a touchscreen experience created for an event for BMW <\/figcaption><\/figure>\n\n\n\n<p>People are also tempted to want really big screens e.g., 90 inches, be careful, a screen this size is almost impossible to use as the top of the screen will be beyond most peoples\u2019 reach and in order to see the whole screen, you\u2019d have to step back meaning you can no longer touch the content.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-interactive-display-multitouch-housing-developer-popcomms-3-1024x683.jpg\" alt=\"A Touchscreen experience featuring a house and information about it \" class=\"wp-image-9605\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-interactive-display-multitouch-housing-developer-popcomms-3-1024x683.jpg 1024w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-interactive-display-multitouch-housing-developer-popcomms-3-300x200.jpg 300w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-interactive-display-multitouch-housing-developer-popcomms-3-768x512.jpg 768w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-interactive-display-multitouch-housing-developer-popcomms-3-1536x1024.jpg 1536w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/touchscreen-interactive-display-multitouch-housing-developer-popcomms-3.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>A touchscreen experience developed for Laurus Homes&#8217; Marketing Suite featuring detailed information and images of their latest housing development.<\/figcaption><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>32\u201d PCAP \u00a3700&nbsp;<\/li><li>43\u201d PCAP \u00a31200&nbsp;<\/li><li>55\u201d PCAP 4K \u00a31900&nbsp;<\/li><li>55\u201d Infra-Red \u00a31200&nbsp;<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Freestanding screens <\/h3>\n\n\n\n<p>Freestanding screens are great as they are more comfortable to use, you have an element of privacy as people can\u2019t really see what you are tapping and can be easily moved. They are much better for disabled access as well.<\/p>\n\n\n\n<p>These touchscreens are usually made of three parts:<\/p>\n\n\n\n<p>1. The screen<\/p>\n\n\n\n<p>2. The stand<\/p>\n\n\n\n<p>3. The PC &#8211;  although in some cases the screens come with built-in PCs, more about this further on<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"336\" height=\"348\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/freestanding-touchscreen.png\" alt=\"An example of a freestanding touchscreen \" class=\"wp-image-10125\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/freestanding-touchscreen.png 336w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/freestanding-touchscreen-290x300.png 290w\" sizes=\"auto, (max-width: 336px) 100vw, 336px\" \/><figcaption>A freestanding touchscreen<\/figcaption><\/figure><\/div>\n\n\n\n<p>You can get a range of different stand types to suit the environment and some come with powered adjustable heights. You can then buy a screen separately (a wall-mounted screen above) best sizes are usually 32\u201d-55\u201d.<\/p>\n\n\n\n<p>The above example will cost approx. \u00a32,700<\/p>\n\n\n\n<p>It\u2019s important to consider the type of stand because if it is being used in a public space it needs to be sufficiently heavy so that it can\u2019t easily be knocked over.<\/p>\n\n\n\n<p>Stands on their own for use with larger screens e.g, from 32\u201d-55\u201d will cost approx. \u00a3700<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Touch tables&nbsp;<\/h3>\n\n\n\n<p>Touch tables are impressive and movable if you have space (they are very heavy) but are great if it\u2019s a shared experience as multiple people can use them at the same time.<\/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\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-8-1024x640.jpg\" alt=\"People crowded around a touchscreen table with an interactive map featuring  proposals for a new housing development \" class=\"wp-image-257\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-8-1024x640.jpg 1024w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-8-300x188.jpg 300w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-8-768x480.jpg 768w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-8-1536x960.jpg 1536w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/04\/touchscreen-interactive-construction-touchtable-ebbsfleet-popcomms-8.jpg 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Ebbsfleet Garden City showcased their new development using a large touchscreen table. <\/figcaption><\/figure>\n\n\n\n<p>There are a lot of different styles and prices vary depending on size from approx. \u00a36,500-\u00a312,000<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"has-inline-color has-pop-pink-color\">Computers&nbsp;<\/span><\/h2>\n\n\n\n<p>It\u2019s much simpler to work out what type of computer you will need. Basically, it comes down to how much processing power you need and this is dependent on how much you\u2019ve got going on in your experience. &nbsp;<\/p>\n\n\n\n<p>You have to use a PC as Macs don\u2019t support touch interactions.  Whether you chose a desktop, laptop or mini PC will depend on where it will sit in relation to the screen. Space is usually tight, so a mini PC  is a good option, they are significantly smaller than desktops and laptops and just as powerful. We always specify an i7 8th Gen CPU, min  16gig Ram, 250gig Solid State Drive and a decent graphics card. &nbsp;<\/p>\n\n\n\n<p>Some touchscreens come with built in mini PCs but these will be low spec and only able to run quite simple experiences. If you have video and 3D models or complex graphics, then an inbuilt PC won\u2019t work. Our advice is always go for the most powerful PC you can afford. Intel NUCs are one of our favourites.&nbsp;<\/p>\n\n\n\n<p>They range in price from \u00a3700-\u00a31,200 depending on how powerful it is.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"682\" height=\"294\" src=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/nuc-computer.png\" alt=\"A photo of a computer used to process the touchscreen experience \" class=\"wp-image-10126\" srcset=\"https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/nuc-computer.png 682w, https:\/\/dev.popcomms.com\/pop\/wp-content\/uploads\/2021\/06\/nuc-computer-300x129.png 300w\" sizes=\"auto, (max-width: 682px) 100vw, 682px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"has-inline-color has-pop-pink-color\">What Software options are available?&nbsp;&nbsp;<\/span><\/h2>\n\n\n\n<p>Now we come to the most important part; the visual experience itself. This is the heart of any interactive and affects the way users engage with your content and the experience they have.<\/p>\n\n\n\n<p>This is where costs will vary wildly. If you are looking for an agency to build an experience for you the starting cost could easily by \u00a315k, our experiences usually start at around this amount. The top end could easily be tens of thousands. It really depends on the complexity of the experience, the content you include in your touchscreen experience e.g, 3D models, complex animations and integration with other systems.<\/p>\n\n\n\n<p>The application used to develop the experience will also have an impact as some are quicker to use than others. We develop our touchscreen experiences either as progressive web apps or use specialist software such as Intuiface or Ventuz .<\/p>\n\n\n\n<p>If you were going to develop the touchscreen experience yourself then you\u2019d have to factor the cost of the software into your budget. A progressive web app doesn\u2019t have any software cost as the tools are open source, however, Intuiface and Ventuz are expensive. Needless to say, you would need specialist inhouse skills to create the experience. Applications like Intuiface are fairly quick to learn and a good designer would be able to pick it up quite quickly.<\/p>\n\n\n\n<p>Take a look at our recent <strong><em><span class=\"has-inline-color has-pop-pink-color\"><a rel=\"noreferrer noopener\" href=\"https:\/\/dev.popcomms.com\/pop\/which-software-can-i-use-to-create-an-interactive-touchscreen-experience\/\" target=\"_blank\">blog<\/a><\/span><\/em><\/strong> for more information about the advantages and restrictions of different software options.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"has-inline-color has-pop-pink-color\">The development process&nbsp;<\/span><\/h2>\n\n\n\n<p>It is possible to develop a Touchscreen experience inhouse. However, if you are looking to invest a large amount of money in the hardware it makes sense to use a specialist agency to consult and develop the experience. They know the questions to ask, have encountered all the highs and lows of development and will support you after the project is delivered. &nbsp;&nbsp;<\/p>\n\n\n\n<p>The main steps any good agency should go through with a customer when developing an experience are:&nbsp;Establish the business objectives for the experience&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Map out the user journey and customer experience&nbsp;<\/li><li>Design the overall look and feel with customer branding&nbsp;<\/li><li>Advise on hardware and software requirements&nbsp;&nbsp;<\/li><li>Develop the experience in the appropriate application or language&nbsp;<\/li><li>Undertake any integrations with other customer systems e.g, CRM, CMS or DAMs&nbsp;<\/li><li>Help with the installation and deployment of the experiences&nbsp;<\/li><li>Provide ongoing support and analytics on usage&nbsp;<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"has-inline-color has-pop-pink-color\">What should be included in typical costs?&nbsp;<\/span><\/h2>\n\n\n\n<p>If you\u2019re getting a quote from a supplier to provide the equipment then it should include everything from the touchscreens and computers, to the mount, full installation, set-up and ongoing support and warranties.&nbsp;<\/p>\n\n\n\n<p>In terms of software, design and development, we include everything to deliver and support an experience so that the customer doesn\u2019t have to think of everything or worry about any hidden costs at all.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"has-inline-color has-pop-pink-color\">Next steps\u2026<\/span><\/h2>\n\n\n\n<p>If you\u2019re going to get an external company put a touchscreen experience in place think carefully about what you need and who you will approach.&nbsp;<\/p>\n\n\n\n<p>One of the big mistakes we see companies do all the time is going to a hardware supplier for a quote first as there are plenty out there and they assume that the supplier will also create the experience.&nbsp;<\/p>\n\n\n\n<p>This usually isn\u2019t the case.&nbsp;<\/p>\n\n\n\n<p>Hardware suppliers will rarely create the content for you and in our experience you should be cautious if they offer to as it is likely they won\u2019t specialise or have much experience developing experiences that will meet your customers\u2019 expectations.&nbsp;<\/p>\n\n\n\n<p>You get what you pay for, and cutting corners may result in a lesser experience, which your audience may find difficult to use. If they walk away, you\u2019ve wasted your time and money.&nbsp;<\/p>\n\n\n\n<p>In our opinion always start with the experience itself, the bit that your customers or audience interact with as that is the most complex part, the hardware is the easy bit.&nbsp;<\/p>\n\n\n\n<p>At POPcomms we work with clients to develop touchscreen experiences that deliver on their business objectives and work for their customers and audience to create memorable experiences.&nbsp;<\/p>\n\n\n\n<p>We\u2019re always happy to just have a chat, discuss a potential project or idea without any hard sell. Simply email me or call me using the details below. Or if you\u2019d like to keep updated on projects we\u2019re working on subscribe to our newsletter or follow us on <a rel=\"noreferrer noopener\" href=\"https:\/\/www.linkedin.com\/company\/4996949\/admin\/\" target=\"_blank\">LinkedIn<\/a>.<\/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\/06\/touchscreen-interactive-multitouch-technology-touchtable-arm-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\/06\/touchscreen-interactive-multitouch-technology-touchtable-arm-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  ","protected":false},"excerpt":{"rendered":"<p>Are you looking to develop an interactive touchscreen experience to showcase your business at an event, exhibition or tradeshow? Or perhaps you want an interactive sales tool on a touchscreen in a demo area, showroom, customer centre or marketing suite to help demonstrate your products and ultimately improve sales? Then in this blog we&#8217;ll take [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":254,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[91,4],"tags":[102,131,201,98,85,175,205,207,14,159,108,168,150,86],"class_list":["post-7357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-showpad","category-touchscreens","tag-events","tag-exhibition","tag-improve-sales","tag-interactive-content","tag-interactive-display-software","tag-interactive-experience","tag-interactive-sales-tools","tag-interactive-touchscreen","tag-interactive-touchscreen-experiences","tag-intuiface","tag-marketing-suite","tag-martech","tag-showpad-partner","tag-visual-storytelling"],"acf":[],"_links":{"self":[{"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/posts\/7357","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/comments?post=7357"}],"version-history":[{"count":0,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/posts\/7357\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/media\/254"}],"wp:attachment":[{"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/media?parent=7357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/categories?post=7357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.popcomms.com\/pop\/wp-json\/wp\/v2\/tags?post=7357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}