Vraag ChatGPT, Claude of Perplexity over ons New
Section inviting visitors to let an AI assistant tell them about the business: pick a topic, the question is ready in an editable textarea (field-sizing:content, fallback fixed height) and buttons open ChatGPT, Claude or Perplexity with it via ?q=. Includes a copy button (Clipboard API, fallback select) and a card showing what the site llms.txt contains. States: empty textarea disables the buttons, copied and copy failed.
Notariskantoor Hendriks & Van Gestel · 's-Hertogenbosch
Vraag een AI-assistent wat ze van ons weten
Je vergelijkt notarissen waarschijnlijk toch al. Kies je onderwerp, de vraag staat klaar. Pas hem gerust aan, en lees zelf het antwoord.
Opent in een nieuw tabblad. Wij zien niet wat je vraagt of wat het antwoord is.
# Notariskantoor Hendriks & Van Gestel
> Notariskantoor in 's-Hertogenbosch, sinds 1971.
> Familierecht, onroerend goed en ondernemingsrecht.
## Tarieven (vaste prijzen, incl. btw)
- [Testament](/tarieven/testament.md): € 395
- [Leveringsakte en hypotheekakte](/tarieven/huis.md): € 1.150
- [Samenlevingscontract](/tarieven/samenwonen.md): € 595
- [Oprichting bv](/tarieven/bv.md): vanaf € 750
## Contact
- Stationsweg 12, 's-Hertogenbosch
- 073 612 40 90 · info@voorbeeld.nl
Wat is llms.txt? Een korte samenvatting van de site voor AI-assistenten, op een vaste plek. Zo noemen ze onze echte prijzen en niet die van een verouderde vergelijkingssite.
How to use it
- Paste the HTML where the page sections should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Vraag ChatGPT, Claude of Perplexity over ons · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="vai">
<div class="vai__in">
<div class="vai__l">
<p class="vai__kick">Notariskantoor Hendriks & Van Gestel · 's-Hertogenbosch</p>
<h2 class="vai__h">Vraag een <span class="vai__nw">AI-assistent</span> wat ze van ons weten</h2>
<p class="vai__lead">Je vergelijkt notarissen waarschijnlijk toch al. Kies je onderwerp, de vraag staat klaar. Pas hem gerust aan, en lees zelf het antwoord.</p>
<div class="vai__topics" role="radiogroup" aria-label="Onderwerp">
<label><input type="radio" name="vai-t" value="testament" checked><span>Testament</span></label>
<label><input type="radio" name="vai-t" value="huis"><span>Huis kopen</span></label>
<label><input type="radio" name="vai-t" value="samen"><span>Samenwonen</span></label>
<label><input type="radio" name="vai-t" value="bv"><span>Bv oprichten</span></label>
</div>
<label class="vai__lbl" for="vai-q">Je vraag</label>
<textarea id="vai-q" class="vai__q" rows="5"></textarea>
<div class="vai__btns">
<a class="vai__ai" data-ai="chatgpt" href="#" target="_blank" rel="noopener"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7"/><path d="M10 6.5v7M6.5 10h7"/></svg>Vraag ChatGPT</a>
<a class="vai__ai" data-ai="claude" href="#" target="_blank" rel="noopener"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 3v14M3 10h14M5 5l10 10M15 5L5 15"/></svg>Vraag Claude</a>
<a class="vai__ai" data-ai="perplexity" href="#" target="_blank" rel="noopener"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 4h12v12H4zM10 4v12M4 10h12"/></svg>Vraag Perplexity</a>
<button class="vai__copy" type="button"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="6.5" y="6.5" width="9" height="10" rx="1.5"/><path d="M4.5 13.5v-9a1 1 0 0 1 1-1h7"/></svg><span>Kopieer vraag</span></button>
</div>
<p class="vai__msg" aria-live="polite"></p>
<p class="vai__small">Opent in een nieuw tabblad. Wij zien niet wat je vraagt of wat het antwoord is.</p>
</div>
<div class="vai__r">
<div class="vai__file">
<div class="vai__file-h"><span>hendriksvangestel.voorbeeld.nl/llms.txt</span><a href="#">open</a></div>
<pre class="vai__pre"><code><span class="vai__c1"># Notariskantoor Hendriks & Van Gestel</span>
<span class="vai__c2">> Notariskantoor in 's-Hertogenbosch, sinds 1971.
> Familierecht, onroerend goed en ondernemingsrecht.</span>
<span class="vai__c1">## Tarieven (vaste prijzen, incl. btw)</span>
- [Testament](/tarieven/testament.md): € 395
- [Leveringsakte en hypotheekakte](/tarieven/huis.md): € 1.150
- [Samenlevingscontract](/tarieven/samenwonen.md): € 595
- [Oprichting bv](/tarieven/bv.md): vanaf € 750
<span class="vai__c1">## Contact</span>
- Stationsweg 12, 's-Hertogenbosch
- 073 612 40 90 · info@voorbeeld.nl</code></pre>
</div>
<p class="vai__note"><b>Wat is llms.txt?</b> Een korte samenvatting van de site voor AI-assistenten, op een vaste plek. Zo noemen ze onze echte prijzen en niet die van een verouderde vergelijkingssite.</p>
</div>
</div>
</div>
</div>/* Vraag ChatGPT, Claude of Perplexity over ons · NedDev · eigen werk. */
/* fonts (Fontshare): bespoke-serif@400,500,600 + manrope@400,500,600,700 */
.vai{--vai-bg:#f3efe6;--vai-ink:#16302b;--vai-seal:#8f2a2a;--vai-line:#ddd5c4;--vai-mut:#5a615b;--vai-code:#16302b;background:var(--vai-bg);color:var(--vai-ink);font-family:'Manrope',sans-serif;box-sizing:border-box}
.vai *,.vai *::before,.vai *::after{box-sizing:border-box}
.vai a:focus-visible,.vai button:focus-visible{outline:2px solid var(--vai-seal);outline-offset:2px}
.vai__in{max-width:1200px;margin:0 auto;padding:44px 32px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:start}
.vai__kick{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--vai-mut)}
.vai__h{font-family:'Bespoke Serif',serif;font-weight:500;font-size:clamp(30px,3.4vw,44px);line-height:1.06;letter-spacing:-.01em;margin:0 0 12px;max-width:16ch}
.vai__nw{white-space:nowrap}
.vai__lead{margin:0 0 20px;font-size:16px;line-height:1.6;color:var(--vai-mut);max-width:50ch}
.vai__topics{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.vai__topics label{position:relative}
.vai__topics input{position:absolute;opacity:0}
.vai__topics span{display:block;padding:7px 14px;border:1.5px solid var(--vai-line);border-radius:3px;font-size:14px;font-weight:600;cursor:pointer;background:#fff;transition:border-color .16s,background-color .16s,color .16s}
.vai__topics span:hover{border-color:var(--vai-ink)}
.vai__topics input:checked+span{background:var(--vai-ink);border-color:var(--vai-ink);color:#fff}
.vai__topics input:focus-visible+span{outline:2px solid var(--vai-seal);outline-offset:2px}
.vai__lbl{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.vai__q{display:block;width:100%;min-height:118px;font:500 15px/1.55 'Manrope',sans-serif;color:var(--vai-ink);background:#fff;border:1.5px solid var(--vai-line);border-radius:3px;padding:12px 14px;resize:vertical;outline:none;transition:border-color .16s}
@supports (field-sizing:content){.vai__q{field-sizing:content;min-height:96px;max-height:220px;resize:none}}
.vai__q:hover{border-color:#c6bca7}
.vai__q:focus-visible{border-color:var(--vai-ink);box-shadow:0 0 0 3px rgba(143,42,42,.14)}
.vai__btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.vai__ai,.vai__copy{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:3px;font:700 14.5px 'Manrope',sans-serif;text-decoration:none;cursor:pointer;transition:background-color .16s,border-color .16s,color .16s}
.vai__ai{background:var(--vai-ink);color:#fff;border:1.5px solid var(--vai-ink)}
.vai__ai:hover{background:#244a42}
.vai__ai:active,.vai__copy:active{transform:translateY(1px)}
.vai__ai svg,.vai__copy svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vai__ai[aria-disabled=true]{background:#b9bfb9;border-color:#b9bfb9;color:#3c433e;cursor:not-allowed;pointer-events:none}
.vai__copy{background:transparent;border:1.5px solid var(--vai-line);color:var(--vai-ink)}
.vai__copy:hover{border-color:var(--vai-ink)}
.vai__copy:disabled{opacity:.5;cursor:not-allowed}
.vai__copy.is-ok{border-color:#2f6b3f;color:#2f6b3f}
.vai__msg{margin:10px 0 0;font-size:13.5px;font-weight:600;min-height:20px}
.vai__msg.is-err{color:var(--vai-seal)}
.vai__msg.is-ok{color:#2f6b3f}
.vai__small{margin:2px 0 0;font-size:12.5px;color:var(--vai-mut)}
.vai__file{background:#fff;border:1px solid var(--vai-line);border-radius:4px;overflow:hidden}
.vai__file-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--vai-line);font:500 12.5px 'JetBrains Mono',monospace;color:var(--vai-mut)}
.vai__file-h span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vai__file-h a{color:var(--vai-seal);font-weight:700}
.vai__pre{margin:0;padding:16px;font:400 13px/1.6 'JetBrains Mono',monospace;color:var(--vai-code);white-space:pre-wrap;word-break:break-word}
.vai__c1{color:var(--vai-seal);font-weight:700}
.vai__c2{color:var(--vai-mut)}
.vai__note{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--vai-mut)}
.vai__note b{color:var(--vai-ink)}
@media (max-width:900px){.vai__in{grid-template-columns:minmax(0,1fr);gap:28px;padding:28px 16px}}
@media (max-width:480px){.vai__ai,.vai__copy{flex:1 1 100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.vai *{transition:none!important}}// Vraag ChatGPT, Claude of Perplexity over ons · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.vai');if(!w)return;
var Q={testament:'Ik woon in \'s-Hertogenbosch en wil een testament laten maken. Wat weet je over Notariskantoor Hendriks & Van Gestel (hendriksvangestel.voorbeeld.nl)? Wat zijn de voor- en nadelen, en hoe verhoudt hun vaste prijs van € 395 zich tot andere notarissen in de regio?',
huis:'Ik koop een huis in \'s-Hertogenbosch. Is Notariskantoor Hendriks & Van Gestel (hendriksvangestel.voorbeeld.nl) een goede keus voor de leverings- en hypotheekakte? Waar moet ik op letten bij de kosten?',
samen:'Wij gaan samenwonen in Den Bosch. Wat weet je over Notariskantoor Hendriks & Van Gestel (hendriksvangestel.voorbeeld.nl) en hebben we een samenlevingscontract nodig of is een geregistreerd partnerschap beter?',
bv:'Ik wil een bv oprichten. Wat weet je over Notariskantoor Hendriks & Van Gestel in \'s-Hertogenbosch (hendriksvangestel.voorbeeld.nl)? Wat kost een oprichting bij hen en wat moet ik vooraf geregeld hebben?'};
var U={chatgpt:'https://chatgpt.com/?q=',claude:'https://claude.ai/new?q=',perplexity:'https://www.perplexity.ai/search?q='};
var ta=w.querySelector('#vai-q'),ais=[].slice.call(w.querySelectorAll('.vai__ai')),cp=w.querySelector('.vai__copy'),cpt=cp.querySelector('span'),msg=w.querySelector('.vai__msg'),t=0;
function sync(){var v=ta.value.trim();ais.forEach(function(a){if(v){a.href=U[a.getAttribute('data-ai')]+encodeURIComponent(v);a.removeAttribute('aria-disabled');a.removeAttribute('tabindex');}else{a.removeAttribute('href');a.setAttribute('aria-disabled','true');a.setAttribute('tabindex','-1');}});
cp.disabled=!v;if(!v){msg.className='vai__msg is-err';msg.textContent='Typ eerst een vraag, dan kun je hem doorsturen.';}else if(msg.classList.contains('is-err')){msg.className='vai__msg';msg.textContent='';}}
function topic(){ta.value=Q[w.querySelector('input[name=vai-t]:checked').value];sync();}
w.addEventListener('change',function(e){if(e.target.name==='vai-t')topic();});
ta.addEventListener('input',sync);
function done(ok){clearTimeout(t);cp.classList.toggle('is-ok',ok);cpt.textContent=ok?'Gekopieerd':'Kopieer vraag';msg.className='vai__msg '+(ok?'is-ok':'is-err');msg.textContent=ok?'De vraag staat op je klembord. Plak hem in je eigen AI-assistent.':'Kopiëren lukte niet. De tekst is geselecteerd, gebruik Ctrl+C of Cmd+C.';
if(!ok){ta.focus();ta.select();}t=setTimeout(function(){cp.classList.remove('is-ok');cpt.textContent='Kopieer vraag';if(ok){msg.textContent='';msg.className='vai__msg';}},2600);}
cp.addEventListener('click',function(){var v=ta.value;try{if(navigator.clipboard&&window.isSecureContext){navigator.clipboard.writeText(v).then(function(){done(true);},function(){done(false);});}else{ta.select();done(document.execCommand('copy'));}}catch(e){done(false);}});
topic();
}
init(document.querySelector('.jouw-container'));
More page sections
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →