TSML UI

12 Step Meeting List

If you are using the 12 Step Meeting List plugin for WordPress, setup is simple. Go to Dashboard > Meetings > Import & Settings > Settings and change User Interface Display → TSML UI

Custom JSON feed

If you can generate a Meeting Guide-spec JSON feed, say, from a custom database, you can plug that info in to the format below. If your data has geographic coordinates, adding a Mapbox API access token will enable maps (otherwise remove that parameter). To specify a default timezone for your location, set a proper time zone in the data-timezone parameter. If you remove it, meeting times will be translated into the user's timezone.

<div
  id="tsml-ui"
  data-src="/path/to/your.json"
  data-mapbox="pk.your.mapbox.access.token.goes.here"
  data-timezone="America/Los_Angeles"
></div>
<script src="https://tsml-ui.code4recovery.org/app.js" async></script>

Google Sheet (direct)

You can connect TSML UI directly to a Google Sheet. To do this, just use your Google Sheet URL as the data-src attribute, get a Google Sheets API Key (here are instructions), and enter it as the data-google attribute.

<div
  id="tsml-ui"
  data-src="https://docs.google.com/spreadsheets/d/your.google.sheet.id/edit#gid=more.stuff.here"
  data-google="your.google.api.key"
  data-mapbox="pk.your.mapbox.access.token.goes.here"
  data-timezone="America/Los_Angeles"
></div>
<script src="https://tsml-ui.code4recovery.org/app.js" async></script>

Some caveats when connecting directly to Google Sheets:

1. Although it is free, Google imposes rate limits on its Sheets API, and if that limit is exceeded, your users may see a 429 (too many requests) error when accessing the meeting finder.
2. Depending on how your sheet is set up, the request from Google can be pretty bulky, and page performance may vary.
3. Users may see incomplete data if they request the page while data is being entered.
4. Some users may have privacy-oriented content blockers that block their access to Google, which will cause an error.
5. If you choose to enter personally identifiable information (such as meeting contact information) this will be exposed to users who know how to look for it.

The Sheets Importer option below mitigates these issues and does not require you to have a Google API key.

Google Sheet (via Sheet Importer)

You can generate a JSON feed from a Google Sheet using the Google Sheet Importer. Use the URL you generate in conjunction with the Custom JSON feed instructions above. Here is a sample Google Sheet you can use to get started.