People who need live translation or captions of your worship services can now access them conveniently through your Rock Mobile app. This guide shows how to integrate Spf.io (pronounced spiffy-oh), an AI-powered tool for translation and accessibility, into your app.

Steps:

1. If you haven’t set up your Rock Mobile app, refer to this guide: Building Your First App | Rock Mobile Docs (rockrms.com).

2. Create a new layout to embed spf.io in your app. 

Go to Mobile Application > Layouts, and add a new layout.

Step_2-rock_mobile_recipe-enhanced.png

For the "Phone Layout XAML" and "Tablet Layout XAML", use the following content:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:Rock="clr-namespace:Rock.Mobile.Cms;assembly=Rock.Mobile"
             xmlns:Common="clr-namespace:Rock.Mobile.Common;assembly=Rock.Mobile.Common">
            <Rock:Zone ZoneName="Main" />
</ContentPage>
3. Get your spf.io session URL. This page explains how to get your session URL. You can also use your /z shortcut, which points to the latest session.
4. Add a new Content block to one of your pages.

Use the following content:

<Grid Rock:Zone.Expands="True">
    <WebView Source="https://{your spf.io url}" />
</Grid>

Step_3-rock_mobile_recipe-enhanced.png

5. Deploy and test your app using the Rock Mobile Core app available in the app store.

6. Open your app and click the spf.io tab to access the audience view. 

Step_6.png
7. Select your language from the language picker.

Step_7.png

8. Test the captioner and see if the captions appear in your app.

Step_8-captions_test.png

What can you do in spf.io’s audience view?

Rock_Mobile_audience_view_mockup.png

Refer to these resources on how to set up your session and use the features available in the audience view: