Demo Search with Background Image

This document outlines how to demonstrate a search control feature to clients using a custom background that mimics their website. This approach helps clients visualize the search integration directly on a version of their site.

File Structure

Ensure the following files are in the same directory:

demo.html — the HTML file.
backgroundImage.png — the custom background image.

HTML Setup

Below is the HTML template to set up the demo:

<html>
  <head>
    <script
      type="module"
      src="https://unpkg.com/ai12z@latest/dist/esm/library.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/ai12z@latest/dist/library/library.css"
    />
    <style>
      /* Update your background image,  Match the size of your background image */
      body {
        background-image: url("backgroundImage.png");
        background-repeat: no-repeat;
        background-size: 1336px 1248px;
      }
    </style>
  </head>
  <body>
    <div>
      <ai12z-cta data-mode="prod" data-key="your_api_key_here"></ai12z-cta>
    </div>
    <!-- data-mode="dev"  -->

    <!-- Override the default global CSS variable after the ai12z-cta tag Adjust to align the search control as needed  -->
    <style>
      ai12z-cta {
        --ai12z-primary-color: rgb(165 180 252);
        --ai12z-secondary-color: #64748b;
        --ai12z-font-size: 16px;
        --ai12z-font-color: rgb(51 65 85);
        --ai12z-font-mute: #64748b;
        --ai12z-border-color: rgba(59, 130, 246, 0.5);
        --ai12z-hover-button-color: rgb(165 180 252);
        --ai12z-hover-bg-color: rgb(249 250 251);
        --ai12z-bubble-background: rgb(241 245 249);
        --ai12z-feedback-selected: rgb(55 65 81);
        --ai12z-feedback-color: rgb(107 114 128);
        --ai12z-font-description: rgb(107 114 128);
        --ai12z-font-search-text: #111827;
        --ai12z-dialog-margin: 3rem 0 0 0;
      }
    </style>
  </body>
</html>

Steps to Create the Demo

1. Create a Background Image

Capture a Screenshot: Take a screenshot of the client's website and save it as backgroundImage.png.
Edit the Image: Using an image editor, remove the existing search control from the screenshot to make space for the demo search icon.
Record Image Dimensions: Note the dimensions of the edited image, which are typically around 1300px by 1100px. This will be used to set the background-size in the CSS.

2. Update the `demo.html` Code

Set Background Size: Update the background-size in the CSS within demo.html to match the actual dimensions of backgroundImage.png.
Position the Search Control: Adjust the top and left properties in the .sc-ai12z-cta .custom-button CSS class to place the search control appropriately on the background.
API Key: Retrieve the data-key from your project settings and replace your_api_key_here with the actual API key.

Final Notes

Testing: Before presenting to the client, open demo.html in a browser to ensure everything is displayed correctly and the search control functions as expected.
Customization: Further CSS adjustments can be made to better integrate the search control into the background, ensuring a seamless demonstration.

This setup not only enhances the client's understanding of the feature but also showcases how it will appear and function on their actual website.

File Structure​

HTML Setup​

Steps to Create the Demo​

1. Create a Background Image​

2. Update the demo.html Code​

Final Notes​