{"id":4265,"date":"2026-07-05T10:45:14","date_gmt":"2026-07-05T09:45:14","guid":{"rendered":"https:\/\/trafficsolvers.nl\/?page_id=4265"},"modified":"2026-07-06T12:33:17","modified_gmt":"2026-07-06T11:33:17","slug":"selection-aid","status":"publish","type":"page","link":"https:\/\/trafficsolvers.nl\/en\/keuzehulp\/","title":{"rendered":"Selection Guide"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4265\" class=\"elementor elementor-4265\" data-elementor-settings=\"{&quot;element_pack_global_tooltip_width&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_padding&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true}}\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<div class=\"elementor-section elementor-top-section elementor-element elementor-element-27ab103a elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"27ab103a\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2d87ca57\" data-id=\"2d87ca57\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-section elementor-top-section elementor-element elementor-element-18130ba0 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"18130ba0\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8ff0e38\" data-id=\"8ff0e38\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-53360c0a elementor-invisible elementor-widget elementor-widget-image\" data-id=\"53360c0a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;zoomOut&quot;,&quot;_animation_delay&quot;:&quot;800&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"282\" height=\"282\" src=\"https:\/\/trafficsolvers.nl\/wp-content\/uploads\/2025\/06\/Fawad-icoon-main-verkleind.png\" class=\"attachment-full size-full wp-image-614\" alt=\"\" srcset=\"https:\/\/trafficsolvers.nl\/wp-content\/uploads\/2025\/06\/Fawad-icoon-main-verkleind.png 282w, https:\/\/trafficsolvers.nl\/wp-content\/uploads\/2025\/06\/Fawad-icoon-main-verkleind-150x150.png 150w\" sizes=\"(max-width: 282px) 100vw, 282px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68e94c34 elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"68e94c34\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;zoomOut&quot;,&quot;_animation_delay&quot;:&quot;850&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Wij helpen je op weg<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5b4b9de8 e-flex e-con-boxed e-con e-parent\" data-id=\"5b4b9de8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-26ec868c elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"26ec868c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:&quot;1000&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Of je nu wilt ontdekken wat er mogelijk is, een praktijkvoorbeeld zoekt of direct een offerte wilt aanvragen: met onze keuzehulp vind je snel de informatie die past bij jouw situatie.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a712127 elementor-widget elementor-widget-html\" data-id=\"a712127\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ts-choice-popup\" id=\"ts-keuzehulp-form\">\n  <div class=\"ts-choice-header\">\n    <div>\n      <div class=\"ts-eyebrow\">Traffic Solvers keuzehulp<\/div>\n      <h2>Vind jouw oplossing<\/h2>\n      <p>Beantwoord drie korte vragen. Binnen 15 seconden brengen we je naar de juiste informatie.<\/p>\n    <\/div>\n\n    <div class=\"ts-progress\" aria-label=\"Voortgang\">\n      <span class=\"ts-progress-step is-active\" data-step-dot=\"1\"><\/span>\n      <span class=\"ts-progress-step\" data-step-dot=\"2\"><\/span>\n      <span class=\"ts-progress-step\" data-step-dot=\"3\"><\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"ts-step-label\" id=\"ts-step-label\">Stap 1 van 3<\/div>\n\n  <div class=\"ts-sentence\" aria-label=\"Keuzehulp Traffic Solvers\">\n    <div class=\"ts-line\">\n      <span>Ik werk bij een<\/span>\n\n      <span class=\"ts-dd\" data-field=\"organisatie\">\n        <button type=\"button\" class=\"ts-dd-trigger\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span><\/span>\n        <\/button>\n        <span class=\"ts-dd-menu\" role=\"listbox\">\n          <button type=\"button\" data-value=\"wegbeheerder\">wegbeheerder<\/button>\n          <button type=\"button\" data-value=\"aannemer\">aannemer<\/button>\n          <button type=\"button\" data-value=\"tvm-partij\">TVM-partij<\/button>\n          <button type=\"button\" data-value=\"advies-en-ingenieursbureau\">advies-\/ ingenieursbureau<\/button>\n          <button type=\"button\" data-value=\"communicatiebureau\">communicatiebureau<\/button>\n          <button type=\"button\" data-value=\"evenementenorganisatie\">evenementenbureau<\/button>\n        <\/span>\n      <\/span>\n    <\/div>\n\n    <div class=\"ts-line\">\n      <span>Ik zoek een oplossing voor<\/span>\n\n      <span class=\"ts-dd\" data-field=\"toepassing\">\n        <button type=\"button\" class=\"ts-dd-trigger\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span><\/span>\n        <\/button>\n        <span class=\"ts-dd-menu\" role=\"listbox\">\n          <button type=\"button\" data-value=\"bouwcommunicatie\">minder hinder<\/button>\n          <button type=\"button\" data-value=\"belevingsonderzoek\">meer participatie<\/button>\n          <button type=\"button\" data-value=\"beleid\">meer begrip voor beleid<\/button>\n          <button type=\"button\" data-value=\"evenementen\">een bereikbaar evenement<\/button>\n          <button type=\"button\" data-value=\"melvin\">het delen van Melvinupdates<\/button>\n          <button type=\"button\" data-value=\"recruitment\">het werven van nieuwe collega's<\/button>\n        <\/span>\n      <\/span>\n    <\/div>\n\n    <div class=\"ts-line\">\n      <span>Daarom wil ik graag<\/span>\n\n      <span class=\"ts-dd\" data-field=\"actie\">\n        <button type=\"button\" class=\"ts-dd-trigger\" aria-haspopup=\"listbox\" aria-expanded=\"false\">\n          <span><\/span>\n        <\/button>\n        <span class=\"ts-dd-menu\" role=\"listbox\">\n          <button type=\"button\" data-value=\"info\">meer informatie<\/button>\n          <button type=\"button\" data-value=\"casestudy\">een casestudy<\/button>\n          <button type=\"button\" data-value=\"folder\">een folder<\/button>\n          <button type=\"button\" data-value=\"contact\">contact<\/button>\n          <button type=\"button\" data-value=\"demo\">een demo<\/button>\n          <button type=\"button\" data-value=\"offerte\">de tarieven<\/button>\n        <\/span>\n      <\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"ts-actions\">\n    <button type=\"button\" id=\"ts-reset\" class=\"ts-reset\">Begin opnieuw<\/button>\n\n    <a id=\"ts-main-cta\" class=\"ts-main-cta is-hidden\" href=\"#\">\n      Bekijk de informatie\n    <\/a>\n  <\/div>\n<\/div>\n\n<style>\n\/* --- Basis Popup Styles --- *\/\n.ts-choice-popup {\n  width: 100%;\n  max-width: 820px;\n  margin: 0 auto;\n  padding: 48px;\n  background: #FFFFFF;\n  color: #1D1B38;\n  border-radius: 24px;\n  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);\n  position: relative; \/* Toegevoegd voor z-index basis *\/\n  z-index: 1; \/* Basis z-index *\/\n}\n\n.ts-choice-header {\n  display: flex;\n  justify-content: space-between;\n  gap: 32px;\n  align-items: flex-start;\n  margin-bottom: 28px;\n}\n\n.ts-eyebrow {\n  font-weight: 700;\n  color: #FC7B13;\n  margin-bottom: 10px;\n}\n\n.ts-choice-popup h2 {\n  margin: 0 0 12px;\n  color: #1D1B38;\n  font-size: 42px;\n  line-height: 1.08;\n}\n\n.ts-choice-popup p {\n  max-width: 560px;\n  margin: 0;\n  color: #1D1B38;\n  opacity: .78;\n  font-size: 18px;\n  line-height: 1.5;\n}\n\n\/* --- Voortgangsbalk --- *\/\n.ts-progress {\n  display: flex;\n  gap: 8px;\n  padding-top: 9px;\n  flex: 0 0 auto;\n}\n\n.ts-progress-step {\n  display: block;\n  width: 10px;\n  height: 10px;\n  border-radius: 999px;\n  background: rgba(29, 27, 56, 0.18);\n  transition: all .2s ease;\n}\n\n.ts-progress-step.is-active,\n.ts-progress-step.is-done {\n  background: #FC7B13;\n}\n\n.ts-progress-step.is-active {\n  width: 28px;\n}\n\n.ts-step-label {\n  color: #FC7B13;\n  font-weight: 700;\n  margin-bottom: 14px;\n}\n\n\/* --- De 'Zin' en Dropdowns --- *\/\n.ts-sentence {\n  display: grid;\n  gap: 18px;\n  color: #1D1B38;\n  font-size: 28px;\n  line-height: 1.35;\n  position: relative; \/* Zorg dat dropdowns hierbinnen positioneren *\/\n}\n\n.ts-line {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: 12px;\n}\n\n.ts-dd {\n  position: relative;\n  display: inline-flex;\n  max-width: 100%;\n}\n\n\/* De knop die je aanklikt *\/\n.ts-dd-trigger {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  min-height: 48px;\n  border: none;\n  border-bottom: 3px solid #1D1B38;\n  background: rgba(29, 27, 56, 0.035);\n  color: #1D1B38;\n  font-weight: 700;\n  font-size: inherit;\n  line-height: 1.2;\n  padding: 8px 42px 8px 10px;\n  min-width: 190px;\n  max-width: min(100%, 650px);\n  cursor: pointer;\n  position: relative;\n  text-align: left;\n  white-space: normal;\n  border-radius: 10px 10px 0 0;\n  transition: background .2s ease, border-color .2s ease;\n  z-index: 2; \/* Iets hoger dan de basis *\/\n}\n\n.ts-dd-trigger:hover,\n.ts-dd.is-open .ts-dd-trigger {\n  background: rgba(252, 123, 19, 0.09);\n  border-color: #FC7B13;\n}\n\n.ts-dd-trigger span {\n  display: inline;\n  overflow-wrap: normal;\n  word-break: normal;\n  hyphens: none;\n}\n\n\/* Specifieke breedtes voor de velden *\/\n.ts-dd[data-field=\"organisatie\"] .ts-dd-trigger,\n.ts-dd[data-field=\"actie\"] .ts-dd-trigger {\n  min-width: 190px;\n  width: auto;\n  white-space: nowrap;\n}\n\n.ts-dd[data-field=\"organisatie\"] .ts-dd-trigger span,\n.ts-dd[data-field=\"actie\"] .ts-dd-trigger span {\n  white-space: nowrap;\n}\n\n.ts-dd[data-field=\"toepassing\"] .ts-dd-trigger {\n  min-width: 260px;\n  width: auto;\n}\n\n\/* Het pijltje *\/\n.ts-dd-trigger::after {\n  content: \"\";\n  position: absolute;\n  right: 15px;\n  top: 50%;\n  width: 9px;\n  height: 9px;\n  border-right: 4px solid #1D1B38;\n  border-bottom: 4px solid #1D1B38;\n  transform: translateY(-70%) rotate(45deg);\n  transition: transform .2s ease;\n}\n\n.ts-dd.is-open .ts-dd-trigger::after {\n  border-color: #FC7B13;\n  transform: translateY(-30%) rotate(-135deg); \/* Pijltje klapt om *\/\n}\n\n\/* Het uitklapmenu *\/\n.ts-dd-menu {\n  display: none; \/* Standaard verborgen *\/\n  position: absolute;\n  z-index: 99999; \/* Extreem hoog om boven alles te zweven *\/\n  top: calc(100% + 8px);\n  left: 0;\n  min-width: 300px;\n  max-width: min(620px, 86vw);\n  background: #fff;\n  padding: 12px;\n  border-radius: 14px;\n  box-shadow: 0 20px 60px rgba(29, 27, 56, 0.18);\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity .2s ease, visibility .2s ease;\n  pointer-events: none; \/* Voorkom interactie als het dicht is *\/\n}\n\n\/* Wanneer het menu open is *\/\n.ts-dd.is-open .ts-dd-menu {\n  display: grid !important; \/* Forceer grid layout *\/\n  gap: 2px;\n  opacity: 1 !important;\n  visibility: visible !important;\n  pointer-events: auto !important; \/* Klikken weer toestaan *\/\n}\n\n\/* Menu klapt naar boven open als er beneden geen ruimte is *\/\n.ts-dd.opens-up .ts-dd-menu {\n  top: auto;\n  bottom: calc(100% + 8px);\n}\n\n.ts-dd[data-field=\"toepassing\"] .ts-dd-menu {\n  min-width: min(520px, 86vw);\n}\n\n\/* De knoppen IN het menu *\/\n.ts-dd-menu button {\n  appearance: none;\n  display: block;\n  width: 100%;\n  border: none;\n  background: transparent;\n  color: #1D1B38;\n  font: inherit;\n  font-size: 17px;\n  font-weight: 700;\n  line-height: 1.22;\n  cursor: pointer;\n  text-align: left;\n  padding: 8px 10px;\n  border-radius: 8px;\n  transition: background .15s ease;\n}\n\n.ts-dd-menu button:hover,\n.ts-dd-menu button.is-selected {\n  color: #FC7B13;\n  background: rgba(252, 123, 19, 0.08);\n}\n\n\/* --- Actieknop en Reset --- *\/\n.ts-actions {\n  margin-top: 34px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 22px;\n  flex-wrap: wrap;\n  position: relative;\n  z-index: 1; \/* Onder de dropdowns *\/\n}\n\n.ts-main-cta {\n  display: inline-block;\n  background: #FC7B13;\n  color: #fff;\n  padding: 17px 30px;\n  font-weight: 700;\n  text-decoration: none;\n  border-radius: 10px;\n  transition: all .2s ease;\n}\n\n.ts-main-cta:hover {\n  background: #e96f11;\n  color: #fff;\n  transform: translateY(-1px);\n}\n\n.ts-main-cta.is-hidden {\n  opacity: 0;\n  pointer-events: none;\n  transform: translateY(4px);\n}\n\n.ts-reset {\n  border: none;\n  background: transparent;\n  color: #1D1B38;\n  font-weight: 700;\n  cursor: pointer;\n  padding: 0;\n}\n\n.ts-reset:hover {\n  color: #FC7B13;\n}\n\n\/* --- Mobiele Styles --- *\/\n@media (max-width: 760px) {\n  .ts-choice-popup {\n    padding: 32px 24px;\n    border-radius: 18px;\n  }\n\n  .ts-choice-header {\n    display: block;\n  }\n\n  .ts-progress {\n    margin-top: 18px;\n  }\n\n  .ts-choice-popup h2 {\n    font-size: 34px;\n  }\n\n  .ts-sentence {\n    font-size: 23px;\n  }\n\n  .ts-line {\n    display: block;\n  }\n\n  .ts-line > span:first-child {\n    display: block;\n    margin-bottom: 8px;\n  }\n\n  .ts-dd,\n  .ts-dd-trigger {\n    max-width: 100%;\n    width: 100%;\n  }\n\n  .ts-dd[data-field=\"organisatie\"] .ts-dd-trigger,\n  .ts-dd[data-field=\"toepassing\"] .ts-dd-trigger,\n  .ts-dd[data-field=\"actie\"] .ts-dd-trigger {\n    min-width: 0;\n    width: 100%;\n    white-space: normal;\n  }\n\n  \/* Mobiel menu zweeft in het midden van het scherm *\/\n  .ts-dd-menu,\n  .ts-dd.opens-up .ts-dd-menu {\n    position: fixed;\n    left: 20px;\n    right: 20px;\n    top: 50%;\n    bottom: auto;\n    transform: translateY(-50%);\n    min-width: 0 !important;\n    max-width: none;\n  }\n\n  .ts-dd-menu button {\n    font-size: 17px;\n    padding: 12px 10px; \/* Iets groter tik-oppervlak *\/\n  }\n\n  .ts-actions {\n    display: flex;\n  }\n\n  .ts-main-cta {\n    display: inline-block;\n    text-align: center;\n    width: 100%; \/* Volle breedte knop mobiel *\/\n  }\n}\n<\/style>\n\n<script>\n\/\/ We gebruiken een benoemde functie zodat we deze pas kunnen starten als de pagina klaar is.\nfunction initTrafficSolversKeuzehulp() {\n  \/\/ CORRECTIE: Het ID moet exact overeenkomen met de HTML container\n  const root = document.getElementById(\"ts-keuzehulp-form\");\n  \n  \/\/ Veiligheidscheck: als het element niet bestaat, doe niets.\n  if (!root) {\n    console.error(\"Traffic Solvers Keuzehulp: Container element '#ts-keuzehulp-form' niet gevonden.\");\n    return;\n  }\n\n  const demoPopup = \"#elementor-action:action=popup:open&settings=eyJpZCI6IjE1NzEiLCJ0b2dnbGUiOmZhbHNlfQ==\";\n\n  \/\/ Huidige selecties\n  const state = {\n    organisatie: \"\",\n    toepassing: \"\",\n    actie: \"\"\n  };\n\n  \/\/ URL mapping\n  const urls = {\n    bouwcommunicatie: {\n      info: \"\/toepassingen\/bouwcommunicatie\/\",\n      casestudy: \"\/kennisbank\/gemeente-stichtse-vecht-vogelweg\/\",\n      folder: \"\/onepager-hindercampagne\",\n      contact: \"\/contact\/\",\n      demo: demoPopup,\n      offerte: \"\/prijzen\/\"\n    },\n    belevingsonderzoek: {\n      info: \"\/toepassingen\/belevingsonderzoeken\/\",\n      casestudy: \"\/kennisbank\/van-bewonersavond-tot-projectupdate-digitale-communicatie-voor-warmtenet-zandweerd\/\",\n      folder: \"\/onepager-belevingsonderzoek\",\n      contact: \"\/contact\/\",\n      demo: demoPopup,\n      offerte: \"\/prijzen\/\"\n    },\n    beleid: {\n      info: \"\/toepassingen\/beleid-en-mobiliteit\/\",\n      casestudy: \"\/over\/nieuws\/?tag=beleid\",\n      folder: \"\/onepager-beleid\",\n      contact: \"\/contact\/\",\n      demo: demoPopup,\n      offerte: \"\/prijzen\/\"\n    },\n    evenementen: {\n      info: \"\/toepassingen\/evenementen\/\",\n      casestudy: \"\/over\/nieuws\/?tag=evenementen\",\n      folder: \"\/onepager-evenementen\",\n      contact: \"\/contact\/\",\n      demo: demoPopup,\n      offerte: \"\/prijzen\/\"\n    },\n    melvin: {\n      info: \"\/toepassingen\/melvin-mailmodule\/\",\n      casestudy: \"\/kennisbank\/gemeente-barneveld-heeft-landelijke-primeur-met-melvin-notificatiemodule\/\",\n      folder: \"\/onepager-melvin-module\",\n      contact: \"\/contact\/\",\n      demo: demoPopup,\n      offerte: \"\/prijzen\/\"\n    },\n    recruitment: {\n      info: \"https:\/\/recruitmentsolvers.nl\/\",\n      casestudy: \"https:\/\/recruitmentsolvers.nl\/casestudy\/opusflow\/\",\n      folder: \"https:\/\/recruitmentsolvers.nl\/\",\n      contact: \"https:\/\/recruitmentsolvers.nl\/contact\/\",\n      demo: \"https:\/\/recruitmentsolvers.nl\/demo\",\n      offerte: \"https:\/\/recruitmentsolvers.nl\/aanvraag\/\"\n    }\n  };\n\n  \/\/ Teksten voor de grote actieknop\n  const ctaLabels = {\n    info: \"Bekijk de productpagina\",\n    casestudy: \"Lees de casestudy\",\n    folder: \"Download de folder\",\n    contact: \"Neem contact op\",\n    demo: \"Plan een demo\",\n    offerte: \"Bekijk onze tarieven\"\n  };\n\n  \/\/ Voeg parameters toe aan de URL voor tracking\n  function addParams(url, organisatie, toepassing, actie) {\n    if (!url || url.startsWith(\"#elementor-action\")) return url;\n    const separator = url.includes(\"?\") ? \"&\" : \"?\";\n    return url + separator +\n      \"organisatie=\" + encodeURIComponent(organisatie) +\n      \"&toepassing=\" + encodeURIComponent(toepassing) +\n      \"&actie=\" + encodeURIComponent(actie);\n  }\n\n  function selectedCount() {\n    return Object.values(state).filter(Boolean).length;\n  }\n\n  function allSelected() {\n    return state.organisatie && state.toepassing && state.actie;\n  }\n\n  \/\/ Bepaal of het menu naar boven of beneden moet openklappen\n  function positionDropdown(dd) {\n    const menu = dd.querySelector(\".ts-dd-menu\");\n    const trigger = dd.querySelector(\".ts-dd-trigger\");\n\n    if (!menu || !trigger || window.innerWidth <= 760) return; \/\/ Niet op mobiel\n\n    dd.classList.remove(\"opens-up\");\n\n    const triggerRect = trigger.getBoundingClientRect();\n    const menuHeight = menu.scrollHeight;\n    const spaceBelow = window.innerHeight - triggerRect.bottom;\n    const spaceAbove = triggerRect.top;\n\n    \/\/ Als er beneden te weinig ruimte is, en boven wel genoeg\n    if (spaceBelow < menuHeight + 24 && spaceAbove > menuHeight + 24) {\n      dd.classList.add(\"opens-up\");\n    }\n  }\n\n  \/\/ Sluit alle openstaande dropdowns\n  function closeAll() {\n    root.querySelectorAll(\".ts-dd\").forEach(dd => {\n      dd.classList.remove(\"is-open\", \"opens-up\");\n      const trigger = dd.querySelector(\".ts-dd-trigger\");\n      if (trigger) trigger.setAttribute(\"aria-expanded\", \"false\");\n    });\n  }\n\n  \/\/ Werk de voortgangsbalk en stappenlabel bij\n  function updateProgress() {\n    const count = selectedCount();\n    const label = document.getElementById(\"ts-step-label\");\n    const dots = root.querySelectorAll(\".ts-progress-step\");\n\n    const nextStep = Math.min(count + 1, 3);\n    if(label) {\n        label.innerText = allSelected() ? \"Voltooid\" : \"Stap \" + nextStep + \" van 3\";\n    }\n\n    dots.forEach((dot, index) => {\n      dot.classList.toggle(\"is-done\", index < count);\n      dot.classList.toggle(\"is-active\", index === Math.min(count, 2));\n    });\n  }\n\n  \/\/ Werk de grote actieknop (CTA) bij\n  function updateCta() {\n    const mainCta = document.getElementById(\"ts-main-cta\");\n    if (!mainCta) return;\n\n    if (!allSelected()) {\n      mainCta.classList.add(\"is-hidden\");\n      mainCta.href = \"#\";\n      mainCta.innerText = \"Bekijk de informatie\";\n      updateProgress();\n      return;\n    }\n\n    const baseUrl = urls[state.toepassing][state.actie];\n    const finalUrl = addParams(baseUrl, state.organisatie, state.toepassing, state.actie);\n\n    mainCta.classList.remove(\"is-hidden\");\n    mainCta.href = finalUrl;\n    mainCta.innerText = ctaLabels[state.actie] || \"Ga verder\";\n    updateProgress();\n  }\n\n  \/\/ --- Initialiseer de Dropdowns ---\n  root.querySelectorAll(\".ts-dd\").forEach(dd => {\n    const field = dd.dataset.field;\n    const trigger = dd.querySelector(\".ts-dd-trigger\");\n    const label = trigger.querySelector(\"span\");\n\n    \/\/ Klikken op de trigger (toon\/verberg menu)\n    trigger.addEventListener(\"click\", function (event) {\n      event.preventDefault();\n      event.stopPropagation(); \/\/ Voorkom dat klik doorgaat naar document\n      \n      const isOpen = dd.classList.contains(\"is-open\");\n\n      closeAll(); \/\/ Sluit eerst anderen\n\n      if (!isOpen) {\n        dd.classList.add(\"is-open\");\n        trigger.setAttribute(\"aria-expanded\", \"true\");\n        \/\/ Positionering berekenen in de volgende render-frame\n        window.requestAnimationFrame(function () {\n          positionDropdown(dd);\n        });\n      }\n    });\n\n    \/\/ Klikken op een optie IN het menu\n    dd.querySelectorAll(\".ts-dd-menu button\").forEach(option => {\n      option.addEventListener(\"click\", function (event) {\n        event.stopPropagation(); \/\/ Voorkom dat klik doorgaat\n        \n        state[field] = option.dataset.value;\n        label.innerText = option.innerText.trim();\n        dd.classList.add(\"has-value\");\n        \n        \/\/ Update geselecteerde status in menu\n        dd.querySelectorAll(\".ts-dd-menu button\").forEach(btn => btn.classList.remove(\"is-selected\"));\n        option.classList.add(\"is-selected\");\n        \n        closeAll();\n        updateCta();\n      });\n    });\n  });\n\n  \/\/ Klik ergens anders op de pagina -> sluit dropdowns\n  document.addEventListener(\"click\", function (event) {\n    if (!root.contains(event.target)) closeAll();\n  });\n\n  \/\/ ESC toets -> sluit dropdowns\n  document.addEventListener(\"keydown\", function (event) {\n    if (event.key === \"Escape\") closeAll();\n  });\n\n  \/\/ Bij scrollen of resize -> sluit dropdowns (voorkomt zwevende menus)\n  window.addEventListener(\"resize\", closeAll);\n  window.addEventListener(\"scroll\", closeAll, true);\n\n  \/\/ --- Reset Knop ---\n  const resetButton = document.getElementById(\"ts-reset\");\n  if(resetButton) {\n      resetButton.addEventListener(\"click\", function () {\n        state.organisatie = \"\";\n        state.toepassing = \"\";\n        state.actie = \"\";\n\n        root.querySelectorAll(\".ts-dd\").forEach(dd => {\n          dd.classList.remove(\"has-value\", \"is-open\", \"opens-up\");\n          dd.querySelector(\".ts-dd-trigger span\").innerText = \"\";\n          dd.querySelector(\".ts-dd-trigger\").setAttribute(\"aria-expanded\", \"false\");\n          dd.querySelectorAll(\".ts-dd-menu button\").forEach(btn => btn.classList.remove(\"is-selected\"));\n        });\n\n        updateCta();\n      });\n  }\n\n  \/\/ Eerste aanroep om CTA status (verborgen) goed te zetten\n  updateCta();\n}\n\n\/\/ --- Zorg dat de code pas draait als de pagina klaar is ---\nif (document.readyState === \"complete\" || document.readyState === \"interactive\") {\n  \/\/ Pagina is al geladen\n  initTrafficSolversKeuzehulp();\n} else {\n  \/\/ Wacht op het laden van de DOM\n  document.addEventListener(\"DOMContentLoaded\", initTrafficSolversKeuzehulp);\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5089d565 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5089d565\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-72104235\" data-id=\"72104235\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-13afdaaa elementor-invisible elementor-widget elementor-widget-image\" data-id=\"13afdaaa\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:&quot;200&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"7785\" height=\"1077\" src=\"https:\/\/trafficsolvers.nl\/wp-content\/uploads\/2025\/01\/Traffic-Solvers-logo.png\" class=\"attachment-full size-full wp-image-205\" alt=\"\" srcset=\"https:\/\/trafficsolvers.nl\/wp-content\/uploads\/2025\/01\/Traffic-Solvers-logo.png 7785w, https:\/\/trafficsolvers.nl\/wp-content\/uploads\/2025\/01\/Traffic-Solvers-logo-300x42.png 300w, https:\/\/trafficsolvers.nl\/wp-content\/uploads\/2025\/01\/Traffic-Solvers-logo-1024x142.png 1024w, https:\/\/trafficsolvers.nl\/wp-content\/uploads\/2025\/01\/Traffic-Solvers-logo-768x106.png 768w, https:\/\/trafficsolvers.nl\/wp-content\/uploads\/2025\/01\/Traffic-Solvers-logo-1536x212.png 1536w, https:\/\/trafficsolvers.nl\/wp-content\/uploads\/2025\/01\/Traffic-Solvers-logo-2048x283.png 2048w, https:\/\/trafficsolvers.nl\/wp-content\/uploads\/2025\/01\/Traffic-Solvers-logo-650x90.png 650w\" sizes=\"(max-width: 7785px) 100vw, 7785px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e156fb elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"8e156fb\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:&quot;250&quot;}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Liever persoonlijk contact?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1c69acd9 elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"1c69acd9\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:&quot;300&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Onze keuzehulp helpt je snel op weg. Heb je een specifieke situatie of wil je kennismaken? We denken graag met je mee.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-376c9eae elementor-align-center elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-global elementor-global-703 elementor-widget-button\" data-id=\"376c9eae\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;,&quot;_animation_delay&quot;:&quot;350&quot;}\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-float\" href=\"#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3DeyJpZCI6IjE1NzEiLCJ0b2dnbGUiOmZhbHNlfQ%3D%3D\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Plan een demo<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Wij helpen je op weg Of je nu wilt ontdekken wat er mogelijk is, een praktijkvoorbeeld zoekt of direct een offerte wilt [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4487,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"content-type":"","footnotes":""},"class_list":["post-4265","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/trafficsolvers.nl\/en\/wp-json\/wp\/v2\/pages\/4265","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trafficsolvers.nl\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/trafficsolvers.nl\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/trafficsolvers.nl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trafficsolvers.nl\/en\/wp-json\/wp\/v2\/comments?post=4265"}],"version-history":[{"count":109,"href":"https:\/\/trafficsolvers.nl\/en\/wp-json\/wp\/v2\/pages\/4265\/revisions"}],"predecessor-version":[{"id":4494,"href":"https:\/\/trafficsolvers.nl\/en\/wp-json\/wp\/v2\/pages\/4265\/revisions\/4494"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/trafficsolvers.nl\/en\/wp-json\/wp\/v2\/media\/4487"}],"wp:attachment":[{"href":"https:\/\/trafficsolvers.nl\/en\/wp-json\/wp\/v2\/media?parent=4265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}