Integrate AI chatbots with Outgrow

Step-by-Step Guide to Integrate Custom HTML in Outgrow

1. Open Your Content: Log into your Outgrow account and open the content piece you want to edit in Build mode.

2. Add Custom HTML Widget: Click on the Add New button, navigate to the Widgets sub-tab, scroll down to find the Custom HTML widget, and click to add it to your content.

3. Customize Your HTML: Click on the HTML Code Editor to enter your custom HTML code. You can modify the overall look and feel of the Custom HTML page here.

Examples of Custom HTML Code:

• Embed a Vimeo Video:

  <iframe src="https://player.vimeo.com/video/184385032" width="100%" height="282" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  

• Embed a YouTube Video:

  <iframe width="100%" height="315" src="https://www.youtube.com/embed/N-P_8ACSHas" frameborder="0" allowfullscreen></iframe>
  

• Add a Background Image:

  <div class="bg-img" style="background:url('YOUR_IMAGE_URL') no-repeat center; background-size: cover; width: 100%; min-height: 350px;"></div>
  

• Add Text on Background Image:

  <div class="bg-img" style="background:url('YOUR_IMAGE_URL') no-repeat center; background-size: cover; width: 100%; min-height: 350px;">
      <h1 style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);">Your Text Here</h1>
  </div>
  

• Add a Table:

  <table style="width:100%; border: 2px solid #ddd;">
      <thead style="border-bottom: 2px solid #ddd;">
          <tr>
              <th style="border-right:1px solid #ddd;padding: 8px;">S.No.</th>
              <th style="border-right:1px solid #ddd;padding: 8px;">Firstname</th>
              <th style="padding: 8px;">Lastname</th>
          </tr>
      </thead>
      <tbody style="text-align:left">
          <tr style="border-bottom: 2px solid #ddd;">
              <td style="border-right:1px solid #ddd;padding: 8px;">1</td>
              <td style="border-right:1px solid #ddd;padding: 8px;">John</td>
              <td style="padding: 8px;">Doe</td>
          </tr>
          <!-- Add more rows as needed -->
      </tbody>
  </table>
  

For further assistance, you can reach out to Outgrow support via their chat option or email.

How to integrate OpenAssistantGPT with Outgrow

1. Create your OpenAssistantGPT chatbot

   Sign in to your OpenAssistantGPT dashboard and create a new chatbot or select an existing one.

2. Configure your chatbot settings

   Customize your chatbot's appearance, behavior, and knowledge base to match your website's needs.

3. Get your embed code

   In your OpenAssistantGPT dashboard, go to the "Deployment" section and copy your unique embed code.

4. Add the embed code to your Outgrow website

   Log in to your Outgrow account, open your website editor, and add an HTML or Custom Code element to your site. Paste the OpenAssistantGPT embed code into this element.

5. Publish your website

   Save your changes and publish your website to make the chatbot live.