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

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](https://lh5.googleusercontent.com/x7AI0jGUpJh9xmHAFxcKA-0XubY1d942e4Hkr3--HruR4lVzyEFs9WkBYyvy685AaHLADxGmoFJPC2sI8GinZWZukPUjVN4A_rTPOrDAAyxNWAfhWhqIfiV3EeP98umQV4hw5t7FJU_zkxxuFg)

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](https://lh5.googleusercontent.com/repkAWf7CFgy4lJxB6cXL-iZzZJFv7NmYHQmEzIGB3wsP6k2imE_dkWxbniXqICtNB0wzzZDyWIMSEU8Rea7YJBtgG7YgTsmUv4rSAAzrx7mCk445DMmUQ3yxZ63Nf33ppoYZfzpT4gWQPfuHQ)

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](https://lh3.googleusercontent.com/IJEftKf8-Savagecvv7syGD5XLO3CSCE04o3rdJz1hChCM9HKNC6X_VrxFKo87SIqy_ICPa9N4PlbxMgdv0VgGiRIlCGu4gbizaUtrVFBXgqrlRpP8QqGnM5eBQbIKL3Aj70zuK3Do5IKI46JQ)

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](https://lh5.googleusercontent.com/m1b4X9ZYHHGYwlotPTpJw3SW7vRXU8CB6UDo3w-3ghi9mRjDdLFjulbjwROx8eFUM_78Vye3FCo6OfXOQmBAGbZQJQOPtfp24QBfdbpfYSO2QuFlO7G1qaCAEAqV8la74GwvJUEo9NBMyZ_T-g)

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

![Figure 5: Framework added](https://lh3.googleusercontent.com/QED1u7ZMkY6uIJh62-4AAswVT_IscDMzP4eF1YQ8N4Mrp78qsaBSAYFCqRtKZAOsQh5oJBRFZP1I8S2-RC7Adm2e6HRqXEpJaKAIcHmbTaIhilPpeR_-G-RnDZld2Uuoc43UJ7Nl2LQfTF8FKg)

## 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:

![](https://lh6.googleusercontent.com/WSyO64ipY_dNW4pbPxXYbc9a9pbefx34zcffcKa-HsmDgpSQ8W18JC8tjGCd-809HfK4HHY_l0Ss_ekvTqjIcm2k2Bq_w3UuvB9RPizZauDSVmNadjs380FR7PAZGifKqLb3NiRfKuhOonfx-A)

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:

![](https://lh5.googleusercontent.com/2jJad8tnv7iAsrrNX7Hzh1tHxK8GNlph38_44oAP8tIUF8y1w-coQFMHaGTc5FHiydCtV-2pFG6pdw7Wm_J9prYXYFZkVHPEm4JNRd0ynRmaIhXctqLSSCSyIFE5gun5V_YDYnVz9FbDYMqB-A)

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

```

![](https://lh3.googleusercontent.com/PR67C6GdAhgZ5aQnJfpSWL1v5Xv75I74U5q7QAtNugcWsnsik3haNnhdoJWA91MDMGRNWroWYmqMW2b_AWi1cULv0ymv1uQCYV4veZRVpqY6QeDXOdA_ApyEbOxqhq_0ij--lC4YSDUaa4J0dA)

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

![](https://lh3.googleusercontent.com/9ovhYCLYL49tdW6sG4LPr0hxMJ8O3ubODaRFrfBnkGXP7htYkAb6JFsgH2SvGUA4XFJVVt4f0o26w1jqCYiA36R8zCgw8tqfVht2wMq7zkls82J-3-3Maaqn84tchyY5035prvHAV9bawEujdg)

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

{% hint style="info" %}
The following code is for the allowance of location permission in iOS device. It is editable as per your requirements
{% endhint %}

```
<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>
```

![](https://lh6.googleusercontent.com/wiIk51cD6k5nMuW9wvLMJe0fRVophW_TJ2G8-CHmQONGo1MSrSxcbrVA9fbMefYHXDLedrJcFL1clQxdl4Ra-Amqru3Q_j5J09jDGKIqyQf6tyOJP1DyLP5S3HGm1JTLgAFi_OcmlTJKIz56xQ)

## **Passing custom payloads** &#x20;

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 = "johndoe@gmail.com"
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., <johndoe@gmail.com>.
* `.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.