Embed XILO Forms On Website
Justin Coscarella avatar
Written by Justin Coscarella
Updated over a week ago

XILO Forms can be embedded right on your website using a script!

Here's how you can get the script:

  1. Login to XILO

  2. Go to the Forms tab from the left-hand navigation

  3. Locate the form you wish to embed on your website from the form list

  4. Click the options menu "⋮" and select "Share Script"

  5. (Optional: Select agents you would like associated with the form)

  6. (Optional: Enter a referral source you would like to associate with the form)

  7. Click "Create Script"

    1. Copy the link to your clipboard using the "Copy Script" button and paste where desired

    2. Share the link with your Webmaster by entering their email into the "Send Script to Webmaster" field and click "Send"

By default, XILO forms are designed to be displayed on a full webpage. Should you need to embed a XILO form as part of a webpage, you can extract the div and iframe from the XILO form script which can be more easily customized with CSS.

While on the webpage containing your embedded XILO form, Right-Click the page and select "Inspect". In the developer console, search the source code for "iframContainer" and copy the div with id="iframContainer" as well as the iframe within it, shown in the screenshot and code example below.

diviframe.png
<div id="iframContainer" style="position: absolute; top:0;left:0;right:0;bottom:0;height:100%;width:100%;overflow: hidden;background-color: white;z-index: 1000;"><iframe id="ifram" seamless="" src="https://forms.xilo.io?companyId=769677&amp;formId=9f660fd5-c8e5-435c-a78b-6614aeb076c2" onload="undefined" frameborder="0" style="position: relative; top: 0;left:0;bottom:0;right:0;width: 100%; height: 100%!important;z-index: 2000;"></iframe></div>

Replace the existing XILO Form Script with the div and iframe copied in the step above. Save and reload your webpage. This will allow easy adjustment of the containing element of the embedded form.

Formatting Tip:

We've found that many layout issues experienced with the form can be resolved starting with adding a fixed height to the iframe as well as ensuring that the position attribute is set to "absolute".

Did this answer your question?