Language selection

Search


Chat wizard - Provisional feature

Unstable feature

To be used at your own risks. All functionalities described below could be removed in any subsequent minor/major release and are excluded from the GCWeb public API.

Documentation and/or working examples for those features could be incomplete or not available.

See all provisional features.

Below is the code to achieve the demo on this page with an HTML form.

<section class="provisional wb-chtwzrd hidden">
	<h2 data-wb-chtwzrd-replace="I can help you find the information you need">Help us help you</h2>
	<form class="mrgn-bttm-xl" action="https://google.ca" method="GET">
		<p class="wb-chtwzrd-greetings">Hi! I can help you find resources that are available to help you in your quest to find information.</p>
		<p>If you just want to surf the internet, go to <a href="https://google.ca">Google search</a></p>
		<fieldset id="q1">
			<legend>It would help me out if I knew a little more about you. Are you ready?</legend>
			<ul class="list-unstyled mrgn-tp-md">
				<li>
					<label>
						<input type="radio" name="ask" value="yes" data-wb-chtwzrd-next="q2" />
						<span>Yes</span>
					</label>
				</li>
				<li>
					<label>
						<input type="radio" name="ask" value="no" data-wb-chtwzrd-next="none" />
						<span>No</span>
					</label>
				</li>
				<li>
					<label>
						<input type="radio" name="ask" value="skip" data-wb-chtwzrd-next="q3" />
						<span>Go straight to the point</span>
					</label>
				</li>
			</ul>
		</fieldset>
		<fieldset id="q2">
			<legend>Do you have a preferred language?</legend>
			<ul class="list-unstyled mrgn-tp-md">
				<li>
					<label>
						<input type="radio" name="preference" value="yes" data-wb-chtwzrd-next="q3" />
						<span>Of course</span>
					</label>
				</li>
				<li>
					<label>
						<input type="radio" name="preference" value="" data-wb-chtwzrd-next="none" data-wb-chtwzrd-url="https://canada.ca/home.html" />
						<span>No</span>
					</label>
				</li>
			</ul>
		</fieldset>
		<fieldset id="q3">
			<legend>Which one is it?</legend>
			<ul class="list-unstyled mrgn-tp-md">
				<li>
					<label>
						<input type="radio" name="lang" value="en" data-wb-chtwzrd-next="none" data-wb-chtwzrd-url="https://canada.ca/en.html" />
						<span>English</span>
					</label>
				</li>
				<li>
					<label>
						<input type="radio" name="lang" value="fr" data-wb-chtwzrd-next="none" data-wb-chtwzrd-url="https://canada.ca/fr.html" />
						<span>Français</span>
					</label>
				</li>
			</ul>
		</fieldset>
		<p class="wb-chtwzrd-farewell wb-inv">Thank you! Your personalized results are ready for you.</p>
		<div class="mrgn-tp-md"></div>
		<button type="submit" class="btn btn-sm btn-primary" data-wb-chtwzrd-replace="Show results">Search</button>
	</form>
</section>

Page details

Date modified: