To add a chatbot demo to your agency website so that potential clients can see a basic version of our chatbot on their website, you can embed any of the following six HTML codes and the demo will appear.
The only difference between the six code versions are in styling, not in functionality, so choose whichever is most suited to your website.
Please also make sure to allocate enough space for the website demo to appear and be sure to test it to be sure there is enough space.
Professional Style:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#uniqueForm {
background-color: #f9f9f9;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
width: 320px;
display: flex;
flex-direction: column;
gap: 12px;
font-family: 'Helvetica Neue', sans-serif;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
#uniqueForm .form-label {
font-size: 16px;
color: #444;
font-weight: 600;
}
#uniqueForm .form-input {
padding: 12px;
border: 1px solid #bbb;
border-radius: 4px;
-webkit-transition: border-color 0.25s;
transition: border-color 0.25s;
}
#uniqueForm .form-input:focus {
border-color: #0084ff;
}
#uniqueForm .form-button {
background-color: #5cb85c;
color: white;
padding: 12px 20px;
border-radius: 4px;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
}
#uniqueForm .form-button:hover {
background-color: #4cae4c;
}
</style>
</head>
<body>
<form action="https://demo.sndrmsg.com/" method="GET" id="uniqueForm">
<label for="url" class="form-label">Enter URL:</label>
<input type="text" id="url" name="url" placeholder="https://example.com" class="form-input">
<button type="submit" class="form-button">Go to URL</button>
</form>
</body>
</html>Dark Style:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#uniqueForm {
background-color: #333;
padding: 20px;
border-radius: 10px;
width: 300px;
display: flex;
flex-direction: column;
gap: 10px;
font-family: 'Calibri', sans-serif;
color: #fff;
}
#uniqueForm .form-label {
font-size: 16px;
color: #ccc;
}
#uniqueForm .form-input {
padding: 10px;
border: 1px solid #555;
border-radius: 4px;
background: #222;
color: #ddd;
-webkit-transition: border-color 0.3s;
transition: border-color 0.3s;
}
#uniqueForm .form-input:focus {
border-color: #008cff;
}
#uniqueForm .form-button {
background-color: #007bff;
color: #fff;
padding: 10px 15px;
border-radius: 4px;
}
#uniqueForm .form-button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<form action="https://demo.sndrmsg.com/" method="GET" id="uniqueForm">
<label for="url" class="form-label">Enter URL:</label>
<input type="text" id="url" name="url" placeholder="https://example.com" class="form-input">
<button type="submit" class="form-button">Go to URL</button>
</form>
</body>
</html>Vibrant Style:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#uniqueForm {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
padding: 20px;
border-radius: 10px;
width: 320px;
display: flex;
flex-direction: column;
gap: 12px;
color: white;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
#uniqueForm .form-label {
font-size: 16px;
font-weight: 600;
}
#uniqueForm .form-input {
padding: 10px;
border: none;
border-radius: 5px;
background: rgba(255,255,255,0.8);
-webkit-transition: background 0.3s;
transition: background 0.3s;
}
#uniqueForm .form-input:focus {
background: white;
color: #333;
}
#uniqueForm .form-button {
background-color: #ff5722;
padding: 10px 15px;
border-radius: 5px;
border: none;
font-weight: bold;
-webkit-transition: background-color 0.2s;
transition: background-color 0.2s;
}
#uniqueForm .form-button:hover {
background-color: #e64a19;
}
</style>
</head>
<body>
<form action="https://demo.sndrmsg.com/" method="GET" id="uniqueForm">
<label for="url" class="form-label">Enter URL:</label>
<input type="text" id="url" name="url" placeholder="https://example.com" class="form-input">
<button type="submit" class="form-button">Go to URL</button>
</form>
</body>
</html>Minimalistic Style:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#uniqueForm {
background-color: #f7f7f7;
padding: 15px;
border: 1px solid #e0e0e0;
border-radius: 5px;
width: 300px;
display: flex;
flex-direction: column;
gap: 10px;
font-family: 'Helvetica Neue', sans-serif;
}
#uniqueForm .form-label {
font-size: 14px;
color: #555;
}
#uniqueForm .form-input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-transition: border-color 0.2s;
transition: border-color 0.2s;
}
#uniqueForm .form-input:focus {
border-color: #0084ff;
}
#uniqueForm .form-button {
background-color: #009688;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
}
#uniqueForm .form-button:hover {
background-color: #00796b;
}
</style>
</head>
<body>
<form action="https://demo.sndrmsg.com/" method="GET" id="uniqueForm">
<label for="url" class="form-label">Enter URL:</label>
<input type="text" id="url" name="url" placeholder="https://example.com" class="form-input">
<button type="submit" class="form-button">Go to URL</button>
</form>
</body>
</html>Modern Style:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#uniqueForm {
background-color: #ffffff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
width: 300px;
display: flex;
flex-direction: column;
gap: 12px;
font-family: Arial, sans-serif;
}
#uniqueForm .form-label {
font-size: 16px;
color: #333;
font-weight: 500;
}
#uniqueForm .form-input {
padding: 12px;
border: 2px solid #dddddd;
border-radius: 8px;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#uniqueForm .form-input:focus {
border-color: #007bff;
box-shadow: 0 0 8px rgba(0,123,255,0.2);
}
#uniqueForm .form-button {
background-color: #007bff;
color: white;
padding: 12
</style>
</head>
<body>
<form action="https://demo.sndrmsg.com/" method="GET" id="uniqueForm">
<label for="url" class="form-label">Enter URL:</label>
<input type="text" id="url" name="url" placeholder="https://example.com" class="form-input">
<button type="submit" class="form-button">Go to URL</button>
</form>
</body>
</html>Classic Style:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#uniqueForm {
background-color: #fff;
padding: 25px;
border: 2px solid #d3d3d3;
border-radius: 8px;
width: 320px;
display: flex;
flex-direction: column;
gap: 15px;
font-family: 'Times New Roman', serif;
}
#uniqueForm .form-label {
font-size: 18px;
color: #333;
font-style: italic;
}
#uniqueForm .form-input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background: #fafafa;
-webkit-transition: border-color 0.3s ease;
transition: border-color 0.3s ease;
}
#uniqueForm .form-input:focus {
border-color: #a52a2a;
}
#uniqueForm .form-button {
background-color: #800000;
color: #fff;
padding: 12px 18px;
border-radius: 4px;
font-weight: bold;
}
#uniqueForm .form-button:hover {
background-color: #5a0000;
}
</style>
</head>
<body>
<form action="https://demo.sndrmsg.com/" method="GET" id="uniqueForm">
<label for="url" class="form-label">Enter URL:</label>
<input type="text" id="url" name="url" placeholder="https://example.com" class="form-input">
<button type="submit" class="form-button">Go to URL</button>
</form>
</body>
</html>If you want to preview how the different styles look, you can insert each code into the left hand box on this website: https://codepen.io/leemark/pen/ozyWbv
(replace the existing code that is pasted there)