[{"data":1,"prerenderedAt":266},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-increase-efficiency-with-white-label-websites-i18n-slugs":-1,"language-blog-slug-en-increase-efficiency-with-white-label-websites":134},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",{"page":135},{"slug":136,"i18nSlugs":137,"social":140,"title":145,"subtitle":79,"isArchived":146,"headerIllustration":147,"date":147,"authors":148,"introTitle":157,"items":158,"pivots":251,"relatedBlogPosts":264,"tags":265,"onMountedScript":185,"onUnmountedScript":185},"increase-efficiency-with-white-label-websites",[138],{"locale":139,"value":136},"en",{"title":141,"description":142,"image":143},"Increase efficiency with white label websites | De Voorhoede","Building identical websites in isolation can feel easy at a first glance. But it's time consuming and it’s error prone. White label website are your solution.",{"url":144},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1693830938-linkedin-blog-alternatief.png","Increase efficiency with white label websites",false,null,[149],{"name":150,"lastName":151,"slug":152,"image":153},"Frank","Warnaar","frank",{"url":154,"alt":147,"width":155,"height":156},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534610-frank.jpg",2049,2732,"Did you ever find yourself building similar websites over and over again for different labels? They all have the same core functionality and just a difference in branding and content. So, you just copy paste. But there’s a smarter and more efficient way to do this. White label websites are here to help you out.",[159,164,168,172,183,187,191,199,206,209,217,222,229,232,240,243,247],{"__typename":160,"id":161,"title":162,"body":163},"TextSectionRecord","191744788","When do you need a white label website?","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Building identical websites in isolation can feel easy at a first glance. It’s just a copy paste of your current codebase, modify the label specifics and you’re done. But in the end it turns out to be time consuming and it’s error prone. Each modification now needs to be applied to each website. And the more websites you run, the harder it gets.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":160,"id":165,"title":166,"body":167},"191744789","White label websites to the rescue","\u003Cp>\u003Cspan style=\"font-weight: 400;\">A \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fservices\u002Fcustom-website-development\u002F\" title=\"white label website\">white label website\u003C\u002Fa> is maintained from a single code repository and therefore is maintained from a single place. Rolling out changes is easier. You commit once and profit directly from them on all your label’s websites directly.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">To still provide for each label’s needs, it needs to have some flexibility. The big challenges are content and branding. Each brand has a different target audience and separate story. Therefore it needs different content and a different tone of voice. And white label websites need to be deployed multiple times, for each label.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":160,"id":169,"title":170,"body":171},"191744790","Content & tone of voice","\u003Cp>\u003Cspan style=\"font-weight: 400;\">To keep a white label website maintainable, we externalise the content into separate CMS projects per label. The codebase contains a set of components. Pages can be composed out of these components from the CMS, filled with content for that label. For the tone of voice, interface strings are also put into the CMS.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":173,"id":174,"image":175,"caption":180,"fullWidth":181,"captionPosition":182},"ImageRecord","191744791",{"url":176,"alt":177,"width":178,"height":179},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1693227540-white-label-cms.png","Code repository: migrate to site label A, site label B and site label C",1999,709,"Code repository for 3 white label websites",true,"bottom",{"__typename":160,"id":184,"title":185,"body":186},"191744792","","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Now we need to keep the supported components from the CMS in sync with the codebase. When we develop a new component, this needs to be available from all the CMS projects for each label. We do so by using \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fblog\u002Fscripted-cms-migrations\u002F\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">scripted migrations\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">: scripts that get your content model from the old to the new state. Since they are scripted, we can apply them repeatedly to each CMS project.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Once the CMS projects are set up, you can use environment variables to connect each CMS project to the matching label’s website using their different API keys.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":160,"id":188,"title":189,"body":190},"191744793","Branding","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Each label has its own branding: logos and design tokens (variables in design). These also need to be different for each label. This can be done by externalising them. Logos can be put into the CMS.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">If you only have a few design tokens, they could also be put into the CMS. That’s what we did for one of our clients:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":173,"id":192,"image":193,"caption":198,"fullWidth":146,"captionPosition":182},"191744794",{"url":194,"alt":195,"width":196,"height":197},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1693227674-white-label-cms-sunlight.png","A website page with its theme colors: yellow and black",1789,1868,"Website A, where the dark themed components relatively light",{"__typename":173,"id":200,"image":201,"caption":205,"fullWidth":146,"captionPosition":182},"191744795",{"url":202,"alt":203,"width":204,"height":178},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1693227749-white-label-cms-lithos-cell.png","A website page with its theme colors: blue and black",1712,"Website B, where the dark themed components are relatively dark",{"__typename":160,"id":207,"title":185,"body":208},"191744796","\u003Cp>\u003Cspan style=\"font-weight: 400;\">As you can see, it’s pretty manageable in this case. We just have 8 design tokens for colours, that provide us enough flexibility to provide enough recognition to the brand for this client. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">But what if you want to take this a step further. Imagine that you want to differentiate in border radii, font families, shadows and spacings. In that case, it’s more maintainable to put the design tokens into code. You need some form of structured duplication now: for each label you need to export the same set of design tokens.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">That could look something like this:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":173,"id":210,"image":211,"caption":216,"fullWidth":181,"captionPosition":182},"191744797",{"url":212,"alt":213,"width":214,"height":215},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1693227793-design-tokens-white-label.png","4 different phones placed in 4 dark green backgrounds, with the name of the phone written in light green",1691,674,"Theme A",{"__typename":218,"id":219,"language":220,"body":221},"CodeBlockRecord","191744798","css","\u002F* theme-a.css *\u002F\n:root {\n  --color-body: #333;\n  --color-primary: #0dc5ad;\n  --color-background: #03473e;\n  --color-background-contrast: #fff;\n  --border-radius: 1rem;\n  --font-family: 'Nanum Myeongjo', serif;\n  --spacing-factor: 2;\n  --shadow-default: -4px 10px 20px 0px #01393185;\n",{"__typename":173,"id":223,"image":224,"caption":228,"fullWidth":181,"captionPosition":182},"191744799",{"url":225,"alt":226,"width":214,"height":227},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1693227866-design-tokens-white-label-2.png","4 different phones placed in 4 yellow backgrounds, with the name of the phone written in blue",599,"Theme B",{"__typename":218,"id":230,"language":220,"body":231},"191744800","\u002F* theme-b.css *\u002F\n:root {\n  --color-body: #333;\n  --color-primary: #0000ff;\n  --color-background: #fffeca;\n  --color-background-contrast: var(--color-body);\n  --border-radius: 0;\n  --spacing-factor: 1;\n  --font-family: 'apercu', Helvetica, Arial, sans-serif;\n  --shadow-default: none;\n",{"__typename":173,"id":233,"image":234,"caption":239,"fullWidth":181,"captionPosition":182},"191744801",{"url":235,"alt":236,"width":237,"height":238},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1693227949-design-tokens-white-label-3.png","4 different phones placed on a white background, with the name of the phone written in pink",1706,593,"Theme C",{"__typename":218,"id":241,"language":220,"body":242},"191744802","\u002F* theme-c.css *\u002F\n:root {\n  --color-body: #333;\n  --color-primary: #ce0b54;\n  --color-background: none;\n  --color-background-contrast: var(--color-body);\n  --border-radius: 0;\n  --spacing-factor: 1;\n  --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n  --shadow-default: none;\n",{"__typename":160,"id":244,"title":245,"body":246},"191744803","Deployment","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Once all the parts are in place, we need to deploy each label’s website. Actually this part is pretty easy. We just deploy from the code repository from our favourite hosting providers Netlify or Vercel multiple times with different environment variables.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":160,"id":248,"title":249,"body":250},"191744804","Hazards on white label road","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Keeping different contexts of labels in mind during development is hard. And the bigger the differences between labels are, the harder it gets to understand the consequences. This applies to the differences we were able to externalise (like theming and content).\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">But when making exceptions that you can’t externalise - like functionality - you will make it even harder. Because now you have conditional flows a user can encounter. For example if the login flow of site A is different from website B, you now have two flows within a single codebase. And in my opinion this is even worse than having two code bases. That might be more maintenance work, but at least it’s predictable. So if functionality needs to differ, ask yourself if going white label suits you best.\u003C\u002Fspan>\u003C\u002Fp>",[252],{"title":253,"body":254,"links":255,"mailchimpValue":185,"mailchimpName":185,"mailchimpId":185,"formType":263,"contactPerson":147},"See if a white label website is a fit for you","\u003Cp>We're happy to help you with your custom website development project.\u003C\u002Fp>\n",[256],{"__typename":257,"id":258,"title":259,"link":260},"InternalLinkRecord","191744777","Read more about our service",{"__typename":261,"slug":262},"ServiceRecord","custom-website-development","none",[],[],1776256134348]