Button("Story Map") {
  // Button action
}
.with(GuideCallout("MyCalloutId")
    .title("Get Started Here")
    .message("The Story Map is where you create and control everything about your story.")
)

DurableGuide

Bring attention to your app’s key features, and onboard new users quick and easy, with this powerful, open-source UI callout library for SwiftUI.

Available on Github

Drawing people into your app and showing them all of its features can be tricky. UI Callouts can help with this task. They can draw people’s attention and show them what’s important, in a way that feels like a natural part of using the app.

The DurableGuide framework makes it simple to add callouts to any existing SwiftUI app, and it provides plenty of flexility in what the callouts can show, and when they will appear in your app.

Quick-Start

It’s easy to enable UI callouts in any new or existing app.

Add the DurableGuide Swift Package to your Xcode project, and then add the .enableGuideCallouts() view modifier to your app’s root view, as show on line 8 in this example…

import DurableGuide

struct ContentView: View {
    var body: some View {
        VStack {
            // App's root view.
        }
        .enableGuideCallouts()
    }
}

You can then attach a callout to virtually any UI element in your app by simply adding a .with(_ guide: GuideCallout) modifier to it, like the example shown on line 4 in the next code snipped, which is adding a callout with title and a message to a SwiftUI Button.

Notice that you pass the modifier an instance of GuideCallout initialized with a unique identifier (“MyCalloutId” in this case.) Keep track of this ID. You’ll use this identifier later to show and hide the callout.

Button("Start Button") {
  // Button action
}
.with(GuideCallout("MyCalloutId")
    .title("Get Started Here")
    .message("The Story Map is where you create and control everything about your story.")
)
.onAppear {
    GuideCallout("MyCalloutId").show()
}

That’s all there is to begin adding callouts to your app. Read on for more advanced features available in the framework…

Then to display a callout, you simply use the callout’s .show() whenever you want to draw attention to a UI element. You might want to show it when the button first appears on the screen, for example. In that case, you can simply add the call to your button’s .onAppear() as shown here on line 9 (notice the use of the callout’s ID when showing it)…

Advanced Features

It’s easy to enable UI callouts in your app. Add the DurableGuide Swift Package to your Xcode project, and then add the .enableGuideCallouts() view modifier to your app’s root view, as show on line 8 in this example…

Bringing people into your app and keeping them engaged can be tricky.

Callouts are a popular UI component that can help with this task. They can draw people’s focus, and show them what’s important, in a way that feels like a natural part of using the app.

DurableGuide makes it simple to add callouts to any existing SwiftUI app, and it provides plenty of flexility in what the callouts can show, and when they will appear in your app.