There are several ways of implementing the web form into your website.
If you have 'App Admin' permissions, you can view and copy out the URL of the web form for tenant requests in the Platform Settings under 'Omnichannel'.
Simplest way: Include a link
Include the URL supplied by Allthings (https://service.allthings.me/s3/helpdesk?appId=....&serviceProviderId....) in a link within an existing page or in a menu item. Let this link open either directly or as a pop up (Attention: There are tenants who have POP blockers installed).
Second way: Installation of a button
Create a button on an existing page and assign it the link we provide (https://service.allthings.me/s3/helpdesk?appId=....&serviceProviderId....). The link can be opened either directly in a tab, or as a pop up (Attention: There are tenants who have installed a POP blocker)
Third way: Set up a subdomain
Set up a subdomain with the domain provider, e.g. Service.administrationxyz.com. Let this subdomain point directly to the URL supplied by Allthings (https://service.allthings.me/s3/helpdesk?appId=....&serviceProviderId....).
If other ways of implementation are considered, our specialists are available at the agreed hourly rate of the person in charge of web hosting at the customer's site.
Fourth way: integration with 'popup'
The prefabricated popup looks like this for now:
The texts can then be changed in the 'Script'.
<script type="text/javascript">
var appId = ""
var serviceProviderId = ""
var title = "You have been selected for a survey"
var subText = "We appreciate your feedback!"
var textWithLinkRedirect = "Please click here start it now."
var cancelRedirect = "No, thank you."
var link = `https://service.allthings.me/s3/helpdesk?app_id=${appId}&service_provider_id=${serviceProviderId}`
var sg_div = document.createElement("div");
sg_div.innerHTML = `<h1>${title}</h1><p>${subText}</p><p><a href=\"${link}\">${textWithLinkRedirect}</a> </p> <a href=\"#\" onclick=\"document.getElementById('sg-popup').style.display = 'none';return false;\">${cancelRedirect}</a> `;
sg_div.id = "sg-popup";
sg_div.style.position = "absolute";
sg_div.style.width = "500px";
sg_div.style.top = "100px";
sg_div.style.left = "400px";
sg_div.style.backgroundColor = "#ffffff";
sg_div.style.borderColor = "#000000";
sg_div.style.borderStyle = "solid";
sg_div.style.padding = "20px";
sg_div.style.fontSize = "16px";
document.body.appendChild(sg_div);
</script>
To use the popup, you need to find the 'HTML' file that belongs to the associated page where you want to include it. This may look something like this:
<!DOCTYPE html>
<html>
<head>
...
...
</head>
<body>
<h1>...</h1>
<p>...</p>
...
</body>
</html>
The above code should then be placed inside the so-called <body> 'tags'. This is how the file could look like in the end:
<!DOCTYPE html>
<html>
<head>
...
...
</head>
<body>
<script type="text/javascript">
var appId = ""
var serviceProviderId = ""
var title = "You have been selected for a survey"
var subText = "We appreciate your feedback!"
var textWithLinkRedirect = "Please click here start it now."
var cancelRedirect = "No, thank you."
var link = `https://service.allthings.me/s3/helpdesk?app_id=${appId}&service_provider_id=${serviceProviderId}`
var sg_div = document.createElement("div");
sg_div.innerHTML = `<h1>${title}</h1><p>${subText}</p><p><a href=\"${link}\">${textWithLinkRedirect}</a> </p> <a href=\"#\" onclick=\"document.getElementById('sg-popup').style.display = 'none';return false;\">${cancelRedirect}</a> `;
sg_div.id = "sg-popup";
sg_div.style.position = "absolute";
sg_div.style.width = "500px";
sg_div.style.top = "100px";
sg_div.style.left = "400px";
sg_div.style.backgroundColor = "#ffffff";
sg_div.style.borderColor = "#000000";
sg_div.style.borderStyle = "solid";
sg_div.style.padding = "20px";
sg_div.style.fontSize = "16px";
document.body.appendChild(sg_div);
</script>
<h1>...</h1>
<p>...</p>
...
</body>
</html>
Furthermore, the appId and the serviceProviderId supplied by Allthings should be elicited. For this you have to look at the link we sent you (https://service.allthings.me/s3/helpdesk?appId=THISISAPPID&serviceProviderId=THISISSERVICEPROVIDERID). There you can find the two values in the URL.
The appId is marked red, the serviceProviderId is marked orange.
In the HTML file you should enter the two values between the quotes.
var appId = "THISISAPPID"
as well as var serviceProviderId = "THISSERVICEPROVIDERID" .
Texts can be easily customized by simply inserting the new matching text between the quotes at title, subText, textWithLinkRedirect and cancelRedirect.
Fifth way: Integration with 'iframe'
An 'iframe' is a way to display another web page within your own. iframes offer the advantage that the user stays on your own homepage but interacts in this window (frame) on another web page.
For the best user experience we suggest to create a new link path of your website and provide a separate HTML file for it (usually the file is automatically a new path). In this file you then need to add the following:
<!DOCTYPE html>
<html>
<body style="margin:0;">
<input type="button" onclick="window.location.replace('IHRE_WEBSEITE');" value="Home" style="margin-top: 7px;margin-left: 10px;position:absolute;z-index:1;color:#ffffff;background-color:#ff5500;font-weight: 600;font-family: Amatic SC, sans-serif !important;font-size:10px;line-height:1.4;border:none;transition: border .25s linear,color .25s linear,background-color .25s linear;border-radius: 2px;padding: 3px 5px 16px 5px;height: 15px;" />
<iframe src="HIER-MUSS-IHR-LINK-HIN" frameborder="0" width="100%" height="100%" style="overflow:hidden;position:absolute;"></iframe>
</body>
</html>
HERE-MUST-Replace-YOUR-LINK-TO with your sent link from Allthings, replace YOUR_WEBSITE with the link to your own page, and replace Home with a word of your choice if necessary.
If the iframe is embedded and does not form a standalone page as a path, the respective properties must be adjusted.
<iframe src="HIER-MUSS-IHR-LINK-HIN" frameborder="0" width="calc(100vw - ANZAHL_IN_PIXEL_EINHEIT)" height="calc(100vh - ANZAHL_IN_PIXEL_EINHEIT)" style="overflow:hidden;"></iframe>
Depending on that it can be enough that you replace the respective fields (NUMBER_IN_PIXEL_UNIT) with e.g. 100px. These must be adapted depending upon, so that it fits for the own side. At the field width="calc(100vw - NUM_IN_PIXEL_UNIT)" you change the width of the iframe and at height="calc(100vh - NUM_IN_PIXEL_UNIT)" the height.
In some cases it is enough to leave width="100%" and only adjust height.
It must be said that other elements of the page can interfere with the iframe in its display.