# Teams & Sharepoint Web Component

{% hint style="warning" %}
**Attention:** The Blockbrain Team will provide you with your specific Sharepoint package, please provide the following information to you Contact.

* Which bot do you want to integrate?
  {% endhint %}

## Key Steps

### **Step 1: Access SharePoint Admin Center**

<figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2FpeUhmYVG2HPlPJLj2a4a%2Fimage.png?alt=media&#x26;token=0415255b-4312-49da-a7d7-a848fb7ab25b" alt="" width="563"><figcaption></figcaption></figure>

* Navigate to the Microsoft Admin Center.
* Select the SharePoint Admin Center to begin the app upload process.

&#x20;

### **Step 2: Manage Apps Section**

<figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2FIeIdKoGX8a7r5Yxls29P%2Fimage.png?alt=media&#x26;token=9ee526fe-cc7e-412a-ae00-4f9ff2d6fb79" alt="" width="563"><figcaption></figcaption></figure>

* In the SharePoint Admin Center, locate the 'Manage Apps' section.
* Click on the 'Upload' button to upload the SharePoint app.

&#x20;

### **Step 3: Upload the App**

* Ensure you have admin rights to upload the app.
* Upload the SharePoint app provided to you.

&#x20;

### **Step 4: Enable the App**

<figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2FYjPSO3qETnpOqahBd2Ea%2Fimage.png?alt=media&#x26;token=a5f52acf-a450-4e45-8454-9a35f47e7545" alt="" width="563"><figcaption></figcaption></figure>

* Choose the default option to enable the app and add it to all SharePoint sites.
* Optionally, select 'Add to Teams' to make the app available in Teams.

{% hint style="warning" %}
Ensure you have the necessary admin rights for both SharePoint and Teams to perform these actions.
{% endhint %}

&#x20;

### **Step 5: Confirm App Availability**

<figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2F9UO7qij7uc9WJa5JuZP7%2Fimage.png?alt=media&#x26;token=75656222-39d5-478a-8edd-9bf34822dd52" alt="" width="563"><figcaption></figcaption></figure>

* After uploading, confirm that the app is available for both SharePoint and Teams.

## Teams Webcomponent&#x20;

### **Step 6: Manage Permissions in Teams**

<div><figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2Fb6jofzWScNOFZa6DW7CZ%2Fimage.png?alt=media&#x26;token=7427c20f-177d-4645-bf3b-90cee47eb468" alt=""><figcaption></figcaption></figure> <figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2Fsyko7i1bl5ef1V7MeLPZ%2Fimage.png?alt=media&#x26;token=87da9b95-4b31-4c12-8f55-a390c139cf67" alt=""><figcaption></figcaption></figure></div>

* As a Teams admin, search for the uploaded app in the 'Manage Apps' section.
* Limit access to specific user groups as needed.

{% hint style="warning" %}
Be aware of user permissions when limiting access to the app.
{% endhint %}

&#x20;

### **Step 7: Add App to Teams**

<figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2FW8VBlBOUfxk8g78sfWsC%2Fimage.png?alt=media&#x26;token=5766dbf4-7d59-4e3e-a6b8-9b7576a9e9c4" alt="" width="563"><figcaption></figcaption></figure>

* Go to the Teams app and find the organizational apps.
* Edit the app settings to add it to the left pane or a specific channel.

## Sharepoint In-Page Webcomponent

### **Step 8: Create a New SharePoint Page**

<figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2FyCEYgMiNlhPRgzCEV1Pm%2Fimage.png?alt=media&#x26;token=12923541-ebae-4471-bb54-9c6510af39b9" alt="" width="563"><figcaption></figcaption></figure>

* In SharePoint, create a new empty page to demonstrate the app's functionality.

&#x20;

### **Step 9: Add App to SharePoint Page**

<figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2FkFACeIBjVS8eLIvMXkGD%2Fimage.png?alt=media&#x26;token=b378d738-da4e-4220-9f95-97288c0e4f67" alt="" width="563"><figcaption></figcaption></figure>

* In the web parts section, search for the uploaded app.
* Add the app to the specific SharePoint page.

&#x20;

### **Step 10: Configure App Settings**

<figure><img src="https://3232460952-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIabFtGTeQzwfWCzp8vd6%2Fuploads%2FkDKmw0aqNtcKeEaZyNMR%2Fimage.png?alt=media&#x26;token=10535842-7f00-4cff-a707-1d3df93d535a" alt="" width="563"><figcaption></figcaption></figure>

* Adjust settings such as user login options and bot identifiers as necessary.

## Video

{% embed url="<https://drive.google.com/file/d/1K05u_XkeKNwymIrbU7xFnLv6YW3Cqcxk/view?usp=sharing>" %}
