Best practices for embedding the iframe into the municipality website

Owned by Alexis Shoemaker (Deactivated)
Last updated: Dec 03, 2015Version comment
2 min read

As the web portion of the public-facing PublicStuff suite, the PublicStuff iframe is your municipality’s request submission and browsing web page that is embedded in the municipality’s website. Go to https://iframe.publicstuff.com/ and search for your agency, wait for the page to reload, and you'll have the correct URL in the address bar.

A) Minimum Requirements

  1. Create a new or choose an existing web page (and not as an external link out of the municipality’s website) for the iframe to be embedded in. These are the dimensions for best viewing experience:

    1. Height: at least 768px.

    2. Width: 100% of the width of the containing div on the page; at least 900px for the two panel frame.

    3. https considerations: Match the http/https code of the iframe to the municipality website URL security settings.

    4. Example iframe code to use: <iframe width="100%" height="768" frameborder="0" src="https://iframe.publicstuff.com/#?client_id=###"</iframe>. See above for finding your muncipality-specific URL.

  1.  

  2. Create a link or graphic from the homepage to link to this new page. The link can read: Report a Problem, Report an Issue, Request Service, or simply the name of your service, e.g., [CityName] Connect

  2.  

  3. Add or update all menu items related to request submission and reporting on the municipality’s website to point to the web page with the embedded iframe. Also consider create or update individual reporting links, e.g., Report a Streetlight, Report a Pothole, that could encourage residents to submit requests while they visit different pages of the website.

 

  B) Additional Recommendations:

  1. Create a graphic to add to a homepage image carousel (collection of rotating images) and link this image to the iframe page.

  2. Create a dedicated website or url redirect for your service. Register www.yourcity311.com (or your service’s title) to easily direct your residents to the service. Examples below:

    1. ashevillenc.gov/ashevilleapp

    2. pensacola311.com

    3. philly311.com

    4. plano.gov/fixit

    5. sanmarcostx.gov/smtxconnect

    6. mystlouispark.org/

  3. Write a short description of the service and how to get it. Dedicate the entire page where the iframe is embedded to the municipality’s PublicStuff service. Describe the service, how residents can submit requests, how to download the app, and what benefits they’ll see when they use it.

  

C) Recommendations for embedding the iframe:

  1. Place the description of PublicStuff above the embedded iframe to educate residents about the service and links to the iTunes App Store and Google Play to promote a mobile-first strategy
  2. Identify that the service is:

    1. For non-emergency requests

    2. Available through a mobile app where residents can also submit requests and browse the municipality's information, calendars, and events.

    3. Accessible and connects information across the web and mobile app when residents create a PublicStuff account

    4. Also below and ready for residents’ submissions in the iframe

  3. Replace the ‘Contact Us’ form on the municipality website with the embedded iframe page.