How to: Embed Qsite™ Into Your Own Website

Qsite Status

This article walks through the process of embedding Qsite™ into your own company website, using the iframe embed approach (as opposed to the methods currently in Beta using full html and/or API access). This will allow your customers to click a link on your website, enter their ticket number and last name, and receive all of the information that is currently available with Qsite™.

  • We recommend first walking through how to brand your Qsite™ with your company logo, because it will display on your website with the RepairQ logo if you do not.

  • Next, we recommend creating a new page on your website, called something like "Repair Status". Make sure you add a link to it in the menu bar or somewhere easy to find.

  • Navigate to the section of the new (or existing) page where you want it embedded, and copy/paste this specific html there, BUT substitute{yourrepairqurl} with your specific RepairQ URL, i.e. https://repairbros.repairq.io:

<iframe src="{yourrepairqurl}/t" style="display:block;margin:auto;border:0;width:100%;min-width:320px;min-height:480px;"></iframe>

  • For example, the company Repair Bros would look like this:

<iframe src="https://repairbros.repairq.io/t" style="display:block;margin:auto;border:0;width:100%;min-width:320px;min-height:480px;"></iframe>

  • If you wish to constrain the width and make it narrower, you can modify the width percentage down from 100%.

Qsite Opportunities

Available with RepairQ 1.16 you can also embed Qsite™ Opportunities into your site.

  • Navigate to the section of the new (or existing) page where you want it embedded, and copy/paste this specific html there, BUT substitute{yourrepairqurl} with your specific RepairQ URL:

<iframe src="{yourrepairqurl}/qsite" style="display:block;margin:auto;border:0;width:100%;min-width:320px;min-height:480px;"></iframe>

  • For example, the company Repair Bros would look like this:

<iframe src="https://repairbros.repairq.io/qsite" style="display:block;margin:auto;border:0;width:100%;min-width:320px;min-height:480px;"></iframe>

  • If you wish to constrain the width and make it narrower, you can modify the width percentage down from 100%.

 

Screen_Shot_2017-08-28_at_2.16.57_PM.png

Screen_Shot_2017-08-28_at_2.17.22_PM.png

 

Qsite Ticket Lookup

Available with RepairQ 1.16.19, you can also embed Qsite™ Ticket Lookup into your site. This provides your customers with a place to securely manage their ticket and appointment details by entering their ticket number or claim number.

  • Navigate to the section of the new (or existing) page where you want it embedded, and copy/paste this specific html there, BUT substitute {yourrepairqurl} with your specific RepairQ URL:

<iframe src="https://yourrepairqurl.repairq.io/qsite/lookup" style="display:block;margin:auto;border:0;width:100%;min-width:320px;min-height:480px;" allow="geolocation"></iframe>

  • For example, the company Repair Bros would look like this:

<iframe src="https://repairbros.repairq.io/qsite/lookup" style="display:block;margin:auto;border:0;width:100%;min-width:320px;min-height:480px;" allow="geolocation"></iframe>

  • If you wish to constrain the width and make it narrower, you can modify the width percentage down from 100%.

Screen_Shot_2019-10-14_at_4.00.41_PM.png

 

Screen_Shot_2019-10-14_at_4.01.28_PM.png

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.