Getting started
Add the Canva Button to an iOS app with the iOS SDK.
Canva provides an SDK to adding the Canva Button to iOS apps. You can use this SDK to launch the Canva editor from within your app.
Here's how it works:
Your app can open the Canva editor in a browser window. The user then creates or edits a design. When the user clicks the Publish button, your app downloads the user's design as an image file.
This tutorial series explains how to add the Canva Button to an empty iOS app. Once you understand the workflow, adapt the steps to add the Canva Button to your existing app

Prerequisites

This tutorial assumes you have an API key to use the Canva Button. If you don't have one, sign up for an API key.

Step 1: Create an Xcode project

You can skip this step if you're adding the Canva Button to an existing app.
For the sake of simplicity, this tutorial uses Storyboards to define the UI of the app. This is not required to use the Canva Button.
  1. 1.
    Open Xcode.
  2. 2.
    Select File > New > Project.
  3. 3.
    Select iOS > App.
  4. 4.
    Select Next.
  5. 5.
    Select Interface > Storyboard.
  6. 6.
    Select Life Cycle > UIKit App Delegate.
  7. 7.
    Select Language > Swift.
  8. 8.
    Select Next.
  9. 9.
    Choose a location for the project.

Step 2: Install the Canva Button SDK

Carthage

Coming soon.

Cocoapods

  1. 1.
    Copy the following code snippet into the project's Podfile:
    1
    use_frameworks!
    2
    3
    target 'YourApp' do
    4
    pod 'Canva.DesignButton'
    5
    end
    Copied!
  2. 2.
    Run pod update.
If you're using the china version of the SDK, replace Canva.DesignButton with Canva-cn.DesignButton.

Manual

Add the framework to the project

  1. 1.
    Download and extract the CanvaButton.tar.gz file. You should have received this file from Canva. The archive contains a CanvaButton.framework file, along with .bcsymbolmap and .dSYM files.
  2. 2.
    Drag the CanvaButton.framework file into the Xcode project.
  3. 3.
    In the Navigator, select the project.
  4. 4.
    Under the Targets heading, select the target.
  5. 5.
    Switch to the General tab.
  6. 6.
    In the Frameworks, Libraries and Embedded content section, add the CanvaButton.framework file.
  7. 7.
    Set the Embed option to Embed & Sign.

Copy files at build time

  1. 1.
    Switch to the Build Phases tab.
  2. 2.
    Click the + button.
  3. 3.
    Select New Copy Files Phase.
  4. 4.
    Expand the Copy Files panel.
  5. 5.
    Set the Destination to Products Directory.
  6. 6.
    Add the .bcsymbolmap and .dSYM files to the list of copied files.

Run a script at build time

  1. 1.
    Click the + button.
  2. 2.
    Select New Run Script Phase.
  3. 3.
    Expand the Run Script panel.
  4. 4.
    Copy the following command into the script editor:
    1
    bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/CanvaButton.framework/strip.sh" "${BUILT_PRODUCTS_DIR}"
    Copied!
  5. 5.
    Enable For install builds only.

Step 3: Set up custom URL schemes

Canva uses custom URL schemes to send information from the Canva editor to your app. URL schemes are unique values that are tied to your Canva Button API key. Canva should have already provided you with this scheme.
To set up the custom URL schemes for your app:
  1. 1.
    Open the Info.plist file.
  2. 2.
    Create a String property with a Key of CanvaButtonScheme.
  3. 3.
    Set the URL scheme as the value of the following properties:
    • CanvaButtonScheme
    • URL Types > Item 0 > URL Schemes > Item 0
The iOS and Android SDKs each have their own, distinct URL schemes.

Step 4: Handle custom URL schemes

The iOS SDK provides two functions for handling custom URL schemes:
  • isInternalURL
  • handleInternalURL
You can use these functions to execute behavior in response to the information that Canva sends to your app. The exact implementation on whether or not your app uses scenes.

With scenes

If your app uses scenes, import the CanvaButton module into the SceneDelegate.swift file:
1
import CanvaButton
Copied!
Then copy the following code into the SceneDelegate class:
1
func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
2
for context in URLContexts {
3
if CanvaButton.isInternalURL(context.url) {
4
CanvaButton.handleInternalURL(context.url)
5
}
6
}
7
}
Copied!

Without scenes

If your app doesn't use scenes, import the CanvaButton module into the AppDelegate.swift file:
1
import CanvaButton
Copied!
Then copy the following code into the AppDelegate class:
1
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
2
if CanvaButton.isInternalURL(url) {
3
CanvaButton.handleInternalURL(url)
4
}
5
6
return true
7
}
Copied!

Step 5: Implement the CanvaViewControllerDelegate protocol

When a user opens and interacts with the Canva editor, the SDK sends information to your app. To receive this information, import the CanvaButton module into the ViewController.swift file:
1
import CanvaButton
Copied!
Then copy the following code into the ViewController.swift file:
1
extension ViewController: CanvaViewControllerDelegate {
2
func canvaViewController(_ canvaViewController: CanvaViewController, didFailToLoadWithError error: Error) {
3
print("Unable to load Canva editor.")
4
print(error)
5
}
6
7
func canvaViewController(_ canvaViewController: CanvaViewController, didTerminateLoadingForDesignID designID: String?) {
8
print("Unable to open design with an ID of \(designID ?? "nil").")
9
}
10
11
func canvaViewController(_ canvaViewController: CanvaViewController, didPublishDesignWithDesignID designID: String?, url: URL?) {
12
print("Published a design with an ID of \(designID ?? "nil").")
13
}
14
15
func canvaViewDidFailPublish(forDesignID designID: String?, withError error: Error) {
16
print("Unable to publish design with an ID of \(designID ?? "nil").")
17
print(error)
18
}
19
20
func canvaViewController(_ canvaViewController: CanvaViewController, didFinishLoadingWithDesignID designID: String) {
21
print("Opened a design with an ID of \(designID).")
22
}
23
}
Copied!
This code extends the ViewController class and implements the CanvaViewControllerDelegate protocol.
Based on this change, the following methods run throughout the lifecycle of the app:
  • didFailToLoadWithError
  • didTerminateLoadingForDesignID
  • didPublishDesignWithDesignID
  • canvaViewDidFailPublish
  • didFinishLoadingWithDesignID
The behavior of these methods is explained throughout this tutorial.

Example

AppDelegate.swift

1
import UIKit
2
import CanvaButton
3
4
@main
5
class AppDelegate: UIResponder, UIApplicationDelegate {
6
7
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
8
if CanvaButton.isInternalURL(url) {
9
CanvaButton.handleInternalURL(url)
10
}
11
12
return true
13
}
14
15
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
16
return true
17
}
18
19
func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
20
return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
21
}
22
23
}
Copied!

SceneDelegate.swift

1
import UIKit
2
import CanvaButton
3
4
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
5
6
var window: UIWindow?
7
8
func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
9
for context in URLContexts {
10
if CanvaButton.isInternalURL(context.url) {
11
CanvaButton.handleInternalURL(context.url)
12
}
13
}
14
}
15
16
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
17
guard let _ = (scene as? UIWindowScene) else { return }
18
}
19
20
}
Copied!

ViewController.swift

1
import UIKit
2
import CanvaButton
3
4
class ViewController: UIViewController {
5
6
override func viewDidLoad() {
7
super.viewDidLoad()
8
}
9
10
}
11
12
extension ViewController: CanvaViewControllerDelegate {
13
14
func canvaViewController(_ canvaViewController: CanvaViewController, didFailToLoadWithError error: Error) {
15
print("Unable to load Canva editor.")
16
print(error)
17
}
18
19
func canvaViewController(_ canvaViewController: CanvaViewController, didTerminateLoadingForDesignID designID: String?) {
20
print("Unable to open design with an ID of \(designID ?? "nil").")
21
}
22
23
24
func canvaViewController(_ canvaViewController: CanvaViewController, didPublishDesignWithDesignID designID: String?, url: URL?) {
25
print("Published a design with an ID of \(designID ?? "nil").")
26
}
27
28
func canvaViewDidFailPublish(forDesignID designID: String?, withError error: Error) {
29
print("Unable to publish design with an ID of \(designID ?? "nil").")
30
print(error)
31
}
32
33
func canvaViewController(_ canvaViewController: CanvaViewController, didFinishLoadingWithDesignID designID: String) {
34
print("Opened a design with an ID of \(designID).")
35
}
36
37
}
Copied!
Last modified 1mo ago