{"id":20401,"date":"2026-04-27T06:01:24","date_gmt":"2026-04-27T06:01:24","guid":{"rendered":"https:\/\/tiptopvakmannen.nl\/configurator\/"},"modified":"2026-04-27T06:01:24","modified_gmt":"2026-04-27T06:01:24","slug":"configurator","status":"publish","type":"page","link":"https:\/\/tiptopvakmannen.nl\/en\/configurator\/","title":{"rendered":"Configurator"},"content":{"rendered":"\n<div id=\"house-configurator\" class=\"hc-configurator hc-panel-left\"\n     data-settings=\"{&quot;show_dimensions&quot;:true,&quot;default_tab&quot;:&quot;exterior&quot;,&quot;min_depth&quot;:150,&quot;max_depth&quot;:400,&quot;min_width&quot;:200,&quot;max_width&quot;:1500,&quot;exterior_base_image&quot;:&quot;https:\\\/\\\/tiptopvakmannen.nl\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/Maine-2-Backpart-1.jpg&quot;,&quot;interior_base_image&quot;:&quot;https:\\\/\\\/tiptopvakmannen.nl\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/New-Fainal-House-Extation-01111-1.jpg&quot;,&quot;panel_position&quot;:&quot;left&quot;}\">\n\n    <!-- Loading State -->\n    <div class=\"hc-loading\" id=\"hc-loading\">\n        <div class=\"hc-spinner\"><\/div>\n        <p>Loading configurator...\n<\/p>\n    <\/div>\n\n    <!-- Main Content -->\n    <div class=\"hc-main\" id=\"hc-main\" style=\"display: none;\">\n        <div class=\"hc-layout\">\n            <!-- Preview Panel -->\n            <div class=\"hc-preview-panel\">\n                <div class=\"hc-preview-container\" id=\"hc-preview-container\">\n                    <!-- Base Image -->\n                    <img decoding=\"async\" id=\"hc-base-image\" class=\"hc-layer hc-base-layer\" src=\"\" alt=\"Example house extension\n\">\n\n                    <!-- Dynamic Layers Container -->\n                    <div id=\"hc-layers\" class=\"hc-layers\"><\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Options Panel -->\n            <div class=\"hc-options-panel\">\n                <!-- Progress Indicator -->\n                <div class=\"hc-progress\" id=\"hc-progress\">\n                    <div class=\"hc-progress-step active\" data-step=\"1\">\n                        <span class=\"hc-step-number\">1<\/span>\n                        <span class=\"hc-step-label\">Dimensions\n<\/span>\n                    <\/div>\n                    <div class=\"hc-progress-line\"><\/div>\n                    <div class=\"hc-progress-step\" data-step=\"2\">\n                        <span class=\"hc-step-number\">2<\/span>\n                        <span class=\"hc-step-label\">Configure\n<\/span>\n                    <\/div>\n                    <div class=\"hc-progress-line\"><\/div>\n                    <div class=\"hc-progress-step\" data-step=\"3\">\n                        <span class=\"hc-step-number\">3<\/span>\n                        <span class=\"hc-step-label\">Your details\n<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Step 1: Dimensions -->\n                <div class=\"hc-step\" id=\"hc-step-1\" data-step=\"1\">\n                    <h2 class=\"hc-step-title\">Dimensions of your extension\n<\/h2>\n                    <p class=\"hc-step-description\">Enter the desired dimensions for your new extension.\n<\/p>\n\n                    <div class=\"hc-dimensions-form\">\n                        <div class=\"hc-dimension-input\">\n                            <label for=\"hc-depth\">Depth\n<\/label>\n                            <div class=\"hc-input-group\">\n                                <input type=\"number\" id=\"hc-depth\" name=\"depth_cm\"\n                                       min=\"150\"\n                                       max=\"400\"\n                                       value=\"150\"\n                                       required>\n                                <span class=\"hc-input-unit\">cm<\/span>\n                            <\/div>\n                            <span class=\"hc-input-hint\">\n                                Minimum: 150 cm \u00b7 Maximum: 400 cm                            <\/span>\n                        <\/div>\n\n                        <div class=\"hc-dimension-input\">\n                            <label for=\"hc-width\">Width\n<\/label>\n                            <div class=\"hc-input-group\">\n                                <input type=\"number\" id=\"hc-width\" name=\"width_cm\"\n                                       min=\"200\"\n                                       max=\"1500\"\n                                       value=\"200\"\n                                       required>\n                                <span class=\"hc-input-unit\">cm<\/span>\n                            <\/div>\n                            <span class=\"hc-input-hint\">\n                                Minimum: 200 cm \u00b7 Maximum: 1500 cm                            <\/span>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"hc-area-display\" id=\"hc-area-display\">\n                        <span class=\"hc-area-label\">Calculated floor area:\n<\/span>\n                        <span class=\"hc-area-value\" id=\"hc-area-value\">0<\/span>\n                        <span class=\"hc-area-unit\">m\u00b2<\/span>\n                    <\/div>\n                <\/div>\n\n                <!-- Step 2: Configuration Options -->\n                <div class=\"hc-step\" id=\"hc-step-2\" data-step=\"2\" style=\"display: none;\">\n                    <!-- Tabs -->\n                    <div class=\"hc-tabs\" id=\"hc-tabs\">\n                        <button type=\"button\" class=\"hc-tab active\" data-section=\"exterior\">\n                            <span class=\"hc-tab-icon\">\ud83c\udfe0<\/span>\n                            Exterior\n                        <\/button>\n                        <button type=\"button\" class=\"hc-tab\" data-section=\"interior\">\n                            <span class=\"hc-tab-icon\">\ud83d\udecb\ufe0f<\/span>\n                            Interior\n                        <\/button>\n                    <\/div>\n\n                    <!-- Options Container -->\n                    <div class=\"hc-options-container\" id=\"hc-options-container\">\n                        <!-- Exterior Options -->\n                        <div class=\"hc-section-options\" id=\"hc-exterior-options\" data-section=\"exterior\">\n                            <!-- Populated by JavaScript -->\n                        <\/div>\n\n                        <!-- Interior Options -->\n                        <div class=\"hc-section-options\" id=\"hc-interior-options\" data-section=\"interior\" style=\"display: none;\">\n                            <!-- Populated by JavaScript -->\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Step 3: Customer Details -->\n                <div class=\"hc-step\" id=\"hc-step-3\" data-step=\"3\" style=\"display: none;\">\n                    <h2 class=\"hc-step-title\">Contact details\n<\/h2>\n                    <p class=\"hc-step-description\">Fill in your details. We will send you your configuration summary and contact you.\n<\/p>\n\n                    <form id=\"hc-customer-form\" class=\"hc-customer-form\">\n                        <div class=\"hc-form-row\">\n                            <label for=\"hc-customer-name\">First and last name\n <span class=\"required\">*<\/span><\/label>\n                            <input type=\"text\" id=\"hc-customer-name\" name=\"customer_name\" required>\n                        <\/div>\n\n                        <div class=\"hc-form-row\">\n                            <label for=\"hc-customer-email\">Email address\n <span class=\"required\">*<\/span><\/label>\n                            <input type=\"email\" id=\"hc-customer-email\" name=\"customer_email\" required>\n                        <\/div>\n\n                        <div class=\"hc-form-row\">\n                            <label for=\"hc-customer-phone\">Phone number\n<\/label>\n                            <input type=\"tel\" id=\"hc-customer-phone\" name=\"customer_phone\">\n                        <\/div>\n\n                        <div class=\"hc-form-row\">\n                            <label for=\"hc-customer-address\">Street name and house number\n<\/label>\n                            <input type=\"text\" id=\"hc-customer-address\" name=\"customer_address\">\n                        <\/div>\n\n                        <div class=\"hc-form-row hc-form-row-half\">\n                            <div class=\"hc-form-col\">\n                                <label for=\"hc-customer-postcode\">Postal code\n<\/label>\n                                <input type=\"text\" id=\"hc-customer-postcode\" name=\"customer_postcode\">\n                            <\/div>\n                            <div class=\"hc-form-col\">\n                                <label for=\"hc-customer-city\">City\n<\/label>\n                                <input type=\"text\" id=\"hc-customer-city\" name=\"customer_city\">\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"hc-form-row\">\n                            <label for=\"hc-additional-notes\">Comments or wishes\n<\/label>\n                            <textarea id=\"hc-additional-notes\" name=\"additional_notes\" rows=\"4\"\n                                      placeholder=\"E.g. specific color variants, execution details or other questions\u2026\n\"><\/textarea>\n                        <\/div>\n                    <\/form>\n                <\/div>\n\n                <!-- Navigation Buttons -->\n                <div class=\"hc-navigation\" id=\"hc-navigation\">\n                    <button type=\"button\" class=\"hc-btn hc-btn-secondary\" id=\"hc-prev-btn\" style=\"display: none;\">\n                        <span class=\"hc-btn-icon\">\u2190<\/span>\n                        Back\n                    <\/button>\n                    <button type=\"button\" class=\"hc-btn hc-btn-primary\" id=\"hc-next-btn\">\n                        Next step\n                        <span class=\"hc-btn-icon\">\u2192<\/span>\n                    <\/button>\n                    <button type=\"button\" class=\"hc-btn hc-btn-primary hc-btn-submit\" id=\"hc-submit-btn\" style=\"display: none;\">\n                        <span class=\"hc-btn-icon\">\u2713<\/span>\n                        Send quote request\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Success State -->\n    <div class=\"hc-success\" id=\"hc-success\" style=\"display: none;\">\n        <div class=\"hc-success-icon\">\u2713<\/div>\n        <h2>Thank you for your request!\n<\/h2>\n        <p>Your configuration has been successfully received.\n<\/p>\n        <p>We will contact you within 2 business days to discuss your project.\n<\/p>\n        <div class=\"hc-reference\">\n            <span class=\"hc-reference-label\">Your request number:\n<\/span>\n            <span class=\"hc-reference-number\" id=\"hc-reference-number\"><\/span>\n        <\/div>\n        <button type=\"button\" class=\"hc-btn hc-btn-primary\" onclick=\"location.reload();\">\n            Start new request\n        <\/button>\n    <\/div>\n\n    <!-- Error Message -->\n    <div class=\"hc-message hc-message-error\" id=\"hc-error-message\" style=\"display: none;\">\n        <span class=\"hc-message-text\"><\/span>\n        <button type=\"button\" class=\"hc-message-close\">&times;<\/button>\n    <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_sitemap_exclude":false,"_sitemap_priority":"","_sitemap_frequency":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-20401","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Configurator - TipTop Vakmannen<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tiptopvakmannen.nl\/en\/configurator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Configurator - TipTop Vakmannen\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tiptopvakmannen.nl\/en\/configurator\/\" \/>\n<meta property=\"og:site_name\" content=\"TipTop Vakmannen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TiptopVakmannen\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tiptopvakmannen.nl\/en\/configurator\/\",\"url\":\"https:\/\/tiptopvakmannen.nl\/en\/configurator\/\",\"name\":\"Configurator - TipTop Vakmannen\",\"isPartOf\":{\"@id\":\"https:\/\/tiptopvakmannen.nl\/en\/#website\"},\"datePublished\":\"2026-04-27T06:01:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/tiptopvakmannen.nl\/en\/configurator\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tiptopvakmannen.nl\/en\/configurator\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tiptopvakmannen.nl\/en\/configurator\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tiptopvakmannen.nl\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Configurator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tiptopvakmannen.nl\/en\/#website\",\"url\":\"https:\/\/tiptopvakmannen.nl\/en\/\",\"name\":\"TiptopVakmannen\",\"description\":\"Innovatief aanbouwersbedrijf\",\"publisher\":{\"@id\":\"https:\/\/tiptopvakmannen.nl\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tiptopvakmannen.nl\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/tiptopvakmannen.nl\/en\/#organization\",\"name\":\"TipTop Vakmannen\",\"url\":\"https:\/\/tiptopvakmannen.nl\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tiptopvakmannen.nl\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/tiptopvakmannen.nl\/wp-content\/uploads\/2024\/06\/tiptop-logo.svg\",\"contentUrl\":\"https:\/\/tiptopvakmannen.nl\/wp-content\/uploads\/2024\/06\/tiptop-logo.svg\",\"width\":131,\"height\":93,\"caption\":\"TipTop Vakmannen\"},\"image\":{\"@id\":\"https:\/\/tiptopvakmannen.nl\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/TiptopVakmannen\/\",\"https:\/\/www.instagram.com\/tiptopvakmannenbv\",\"https:\/\/nl.pinterest.com\/Tiptopvakmannen\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Configurator - TipTop Vakmannen","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tiptopvakmannen.nl\/en\/configurator\/","og_locale":"en_US","og_type":"article","og_title":"Configurator - TipTop Vakmannen","og_url":"https:\/\/tiptopvakmannen.nl\/en\/configurator\/","og_site_name":"TipTop Vakmannen","article_publisher":"https:\/\/www.facebook.com\/TiptopVakmannen\/","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tiptopvakmannen.nl\/en\/configurator\/","url":"https:\/\/tiptopvakmannen.nl\/en\/configurator\/","name":"Configurator - TipTop Vakmannen","isPartOf":{"@id":"https:\/\/tiptopvakmannen.nl\/en\/#website"},"datePublished":"2026-04-27T06:01:24+00:00","breadcrumb":{"@id":"https:\/\/tiptopvakmannen.nl\/en\/configurator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tiptopvakmannen.nl\/en\/configurator\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/tiptopvakmannen.nl\/en\/configurator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tiptopvakmannen.nl\/en\/"},{"@type":"ListItem","position":2,"name":"Configurator"}]},{"@type":"WebSite","@id":"https:\/\/tiptopvakmannen.nl\/en\/#website","url":"https:\/\/tiptopvakmannen.nl\/en\/","name":"TiptopVakmannen","description":"Innovatief aanbouwersbedrijf","publisher":{"@id":"https:\/\/tiptopvakmannen.nl\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tiptopvakmannen.nl\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/tiptopvakmannen.nl\/en\/#organization","name":"TipTop Vakmannen","url":"https:\/\/tiptopvakmannen.nl\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tiptopvakmannen.nl\/en\/#\/schema\/logo\/image\/","url":"https:\/\/tiptopvakmannen.nl\/wp-content\/uploads\/2024\/06\/tiptop-logo.svg","contentUrl":"https:\/\/tiptopvakmannen.nl\/wp-content\/uploads\/2024\/06\/tiptop-logo.svg","width":131,"height":93,"caption":"TipTop Vakmannen"},"image":{"@id":"https:\/\/tiptopvakmannen.nl\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/TiptopVakmannen\/","https:\/\/www.instagram.com\/tiptopvakmannenbv","https:\/\/nl.pinterest.com\/Tiptopvakmannen\/"]}]}},"_links":{"self":[{"href":"https:\/\/tiptopvakmannen.nl\/en\/wp-json\/wp\/v2\/pages\/20401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tiptopvakmannen.nl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tiptopvakmannen.nl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tiptopvakmannen.nl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tiptopvakmannen.nl\/en\/wp-json\/wp\/v2\/comments?post=20401"}],"version-history":[{"count":0,"href":"https:\/\/tiptopvakmannen.nl\/en\/wp-json\/wp\/v2\/pages\/20401\/revisions"}],"wp:attachment":[{"href":"https:\/\/tiptopvakmannen.nl\/en\/wp-json\/wp\/v2\/media?parent=20401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}