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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.chat.quickwork.co/how-to-embed-a-chatbot-in-an-existing-ios-app-using-qcs-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
