You can display Spotilla's public service request form within your own website. Visitors fill in the form on your site, and the submitted service request is saved in Spotilla. Embedding is configured in Spotilla's browser interface.
Permissions and preparing the form
You need permission to edit service request settings and permission to add an HTML embed to the target website. A Spotilla administrator has permission to manage service request settings. Contact your website administrator to obtain permission to edit the website.
From Spotilla's side menu, open Service requests → Service request settings. On the Settings tab, check that Service request feature in use is selected and Disable default public form is turned off. Save any changes using the Update service request setting button.
The supplied embed code opens the default form in Finnish. Its options include only active service request categories that have been set as public. On the Service request categories tab, check the categories' Used on public form setting and verify on the form that at least one intended category can be selected.
The category, folder and password settings of a form created separately on the Public forms tab do not carry over to the default form. The embed code does not automatically point to such a form. For instructions on configuring separate forms, see Public service request form settings.
Allow the website and add the embed code
- In service request settings, select the Origins tab and click Add new allowed origin.
- Fill in Url of embedding site with the address of the website where the form will be displayed. Use the website's origin, for example
https://www.esimerkki.fi: this includes the protocol, domain name and a separate port if applicable. Including an individual page's path does not restrict permission to embed the form to that page alone. Also take into account any redirect to another domain. - Save by clicking Add new allowed origin in the window that opens. The new origin appears in the list on the tab.
- Click Copy the code next to the origin's Code for embedding field.
- Open the target website's editor and paste the code into your site's HTML or embed area. Publish the page according to your website's usual process.
The code displays the form in an iframe with a default width of 500 pixels and height of 700 pixels. You can adjust the frame dimensions to suit your website's layout. Keep the form's address and the token identifier it contains: Spotilla uses the identifier to find the permission for that origin. The identifier is also passed along when the form is submitted and to the success page.
An allowed origin permits the form to be displayed in a frame on the specified website. It does not enable a disabled form, change service request categories or give visitors permission to process service requests in Spotilla. The default form is also available directly at its address; permission to embed it does not restrict request submissions to your own website.
Verify that it works on the published page
Open the published web page without logging in to Spotilla. Check that the form is displayed, the intended service request categories can be selected, and all fields and the submit button are usable on a phone screen as well. Saving the code in the website editor alone does not confirm that the embed works.
Submit a service request clearly named as a test, following the instructions in Submitting a public service request. The message Service request was successfully sent. on the success page confirms the submission. Check that the success page is also displayed within the frame.
The test request is a real service request saved in Spotilla. Ask someone with permission to view requests in that category to check it in Spotilla's Service requests list. Verify the title, service request category and Spot, if any. If needed, refer to Searching for and assigning service requests. Embedding does not change the permissions of those who process requests.
If the form is not displayed, check the saved embedding site address, the published page's actual domain and the identifier in the embed code. Also check that the default form is enabled. If the form opens directly but does not appear within the website, ask your website administrator to check that the site allows Spotilla iframe embeds and preserves the code when publishing.
Change the address or remove permission to embed
On the Origins tab, change Url of embedding site for the relevant origin and click Update url next to it. The identifier stays the same, so the existing code can be used on the new target website. Verify that it works again on the published page. The old website loses the permission to embed granted by this origin unless it has another valid permission.
Remove the permission by clicking the trash icon on the right of the origin and confirming the deletion. The identifier associated with the deleted origin will no longer grant permission to embed on subsequent loads. Deleting the origin does not delete the form, service request categories or previously submitted service requests, and it does not disable direct access to the default form's address.
If necessary, also remove the embed code from your own website. If you add the origin again later, it will receive a new identifier: copy the new code to the website and test the embed again.