How to embed a web widget in an existing iOS app using Conversation Management's SDK

Embed Conversation Management's iOS SDK to use the widget in your iOS app, communicate with agents, or use the chatbot within your existing mobile app.

Adding a chatbot to your application involves the following three steps:

1. Importing the framework

2. Adding the code

3. Passing custom payloads

Importing the framework

To start importing the framework, follow these steps:

1. Click here to download the .framework file into your system. Now suppose you have a project named SampleProject in which you have to integrate the framework so you have to go to the project path in Finder and paste your downloaded framework below the .xcodeproject or .xcworkspace file:

Figure 1: Pasting the framework

2. Now add the framework in our project. Open the project in Xcode and select SampleProject from the project navigator pane. Then navigate to TARGETS > General and click the + icon under the Framework, Libraries, and Embedded Content section:

Figure 2: Adding the framework

3. A drop-down menu will appear asking to choose the framework. Click on the Add Other... option and then click the Add Files… option:

Figure 3: Add files

4. Now, navigate to your project path and select the QWChatFramework.framework file which we have copied in Step 1 and click Open:

Figure 4: Navigating the framework file

5. You can see the framework in your project navigator tab under the Frameworks folder:

Figure 5: Framework added

Adding the code

1. First, disable the bitcode of your project. To do this, select the SampleProject from the project navigator pane. Then go to Build Options and search for the Enable Bitcode option. Click No to disable it:

2. Now, search for the Build Phase option and click the + button. Select the New Run Script Phase option from the drop-down menu options:

3. The Run Script window will open. Copy and paste the following code into the script area: So it will look like the below figure:

APP_PATH="${TARGET_BUILD_DIR}/${WRAPPER_NAME}"

# This script loops through the frameworks embedded in the application and
# removes unused architectures.
find "$APP_PATH" -name 'QWChatFramework*.framework' -type d | while read -r FRAMEWORK
do
    FRAMEWORK_EXECUTABLE_NAME=$(defaults read "$FRAMEWORK/Info.plist" CFBundleExecutable)
    FRAMEWORK_EXECUTABLE_PATH="$FRAMEWORK/$FRAMEWORK_EXECUTABLE_NAME"
    echo "Executable is $FRAMEWORK_EXECUTABLE_PATH"

    EXTRACTED_ARCHS=()

    for ARCH in $ARCHS
    do
        echo "Extracting $ARCH from $FRAMEWORK_EXECUTABLE_NAME"
        lipo -extract "$ARCH" "$FRAMEWORK_EXECUTABLE_PATH" -o "$FRAMEWORK_EXECUTABLE_PATH-$ARCH"
        EXTRACTED_ARCHS+=("$FRAMEWORK_EXECUTABLE_PATH-$ARCH")
    done

    echo "Merging extracted architectures: ${ARCHS}"
    lipo -o "$FRAMEWORK_EXECUTABLE_PATH-merged" -create "${EXTRACTED_ARCHS[@]}"
    rm "${EXTRACTED_ARCHS[@]}"

    echo "Replacing original executable with thinned version"
    rm "$FRAMEWORK_EXECUTABLE_PATH"
    mv "$FRAMEWORK_EXECUTABLE_PATH-merged" "$FRAMEWORK_EXECUTABLE_PATH"

done

5. Now right click on your info.plist file in the project navigator pane. Select Open As > Source Code option:

6. Copy and paste the following code in the info.plist source code. It is illustrated in the following figure:

The following code is for the allowance of location permission in iOS device. It is editable as per your requirements

<key>NSAppTransportSecurity</key>
<dict>
  	<key>NSAllowsArbitraryLoads</key>
  	<true/>
</dict>
<key>NSLocationAlwaysUsageDescription</key>
<string>This will be used to locate current location</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>This will be used to locate current location</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>This will be used to locate current location</string>

Passing custom payloads

You have successfully added the framework in your project. Now import QWChatFramework in your swift file and you can use the below code for our Chat Screen:

let data = GlobalVaribales()
data.botId = "c***************r34g"
data.name = "John Doe"
data.emailId = "[e-mail]"
data.created_at = "Mon Mar 23 2020 17:01:15"
data.custom_payload = "custom_payload"
        
ChatViewController.getAccessForController(data: data, onSuccess: { (controller) in
self.navigationController?.pushViewController(controller, animated: true)
}, onFailure: { (errorMsg) in
print("\(errorMsg)")
})

To use these, go to the Inboxes window where the script for your inbox is generated. Scroll down and copy the messenger script that has custom payloads with keywords such as name, email, created_at, and custom_payload under the settings object:

• .name: The genuine name of the user you want to get reflected in the support panel. E.g., John Doe.

• .emailId: The genuine email address of the user. E.g., [e-mail].

• .created_at: The accurate timestamp of the conversation being created. E.g., Mon March 23 2020 17:01:15 GMT+0530.

• .custom_payload: An object of payloads that you want to pass. It could be an information related to sign up, login details or could contain a set of login credentials of a user.

Now, add the above given on the listener of the button (web widget) via which you want to open the bot.