CODEWITHSUNDEEP
microsoft-teamsteams-toolkit
Shubham
Shubham

Reputation: 3173

Welcome message Microsoft teams extension

I am trying to send a welcome message when a user adds the bot for the first time in Microsoft Teams. I am unable to do that. These are the steps for adding the bot:

This is what I want the app to do: enter image description here

This is the code I am using:

import { TeamsActivityHandler, TurnContext, ChannelAccount, ActivityTypes } from "botbuilder";

export class TeamsBot extends TeamsActivityHandler {
  constructor() {
    super();
    const card = {
      contentType: 'application/vnd.microsoft.card.adaptive',
      content: {
        type: 'AdaptiveCard',
        body: [
          {
            type: 'TextBlock',
            text: 'Thank you for installing me!',
            weight: 'bolder',
            size: 'medium'
          }
        ]
      }
    };
    // Bind the overridden onMembersAdded method
    this.onMembersAdded(this.onMembersAddedActivity.bind(this));
    // Bind the overridden onConversationUpdate method
    this.onConversationUpdate(this.onConversationUpdateActivity.bind(this));
  
  }

  /**
   * Overrides the onMembersAdded method from TeamsActivityHandler.
   * @param membersAdded List of members added to the conversation.
   * @param context The context object for this turn.
   */
  protected async onMembersAddedActivity(membersAdded: ChannelAccount[], context: TurnContext): Promise<void> {
    await context.sendActivity('Thank you for installing me!');
    console.log('onMembersAddedActivity')
    // Create a adaptive card and send it to the conversation when the bot is added to the conversation.
    const card = {
      contentType: 'application/vnd.microsoft.card.adaptive',
      content: {
        type: 'AdaptiveCard',
        body: [
          {
            type: 'TextBlock',
            text: 'Thank you for installing me!',
            weight: 'bolder',
            size: 'medium'
          }
        ]
      }
    };
    await context.sendActivity({ attachments: [card] });
  }

  protected async onConversationUpdateActivity(context: TurnContext): Promise<void> {
    const card = {
      contentType: 'application/vnd.microsoft.card.adaptive',
      content: {
        type: 'AdaptiveCard',
        body: [
          {
            type: 'TextBlock',
            text: 'Thank you for installing me!',
            weight: 'bolder',
            size: 'medium'
          }
        ]
      }
    };

    await context.sendActivity({ attachments: [card] });
    console.log('onConversationUpdateActivity')
    if (context.activity.type === ActivityTypes.ConversationUpdate) {
      // Check if the bot is the only member added
      if (context.activity.membersAdded?.length === 1 && context.activity.membersAdded[0].id === context.activity.recipient.id) {
        await context.sendActivity('Thank you for installing me!');
      }
    }
  }
  
}

Any recommendation on how I can achieve this or anything I am missing here? Thank you.

Upvotes: 1

Views: 79

Answers (2)

Shabbir Dhangot
Shabbir Dhangot

Reputation: 9131

To achieve this functionality, you can use the onInstallationUpdateActivity method. This method triggers when an application is added by a user. By implementing this method, you can ensure that a welcome message is sent each time a user installs the application.

public async onInstallationUpdateActivity(context: TurnContext): Promise<void> {
    const activity = context?.activity?.action;
    if (activity === "add") {
        // Sends an activity to the sender of the incoming activity to add.
        const entity = this.assembleEntityForWelcomeMsgCard(context);
        const welcomeMsgCard = this.getWelcomeMessageCard(entity);
        await context.sendActivity(MessageFactory.attachment(CardFactory.adaptiveCard(welcomeMsgCard)));
    }
}

Welcome Card

Upvotes: 0

Meghana-MSFT
Meghana-MSFT

Reputation: 792

Please check the below updated version of your code:

import { TeamsActivityHandler, TurnContext, ChannelAccount, ActivityTypes } from "botbuilder";

export class TeamsBot extends TeamsActivityHandler {
  constructor() {
    super();

    // Bind the overridden onMembersAdded method
    this.onMembersAdded(this.onMembersAddedActivity.bind(this));
  }

  protected async onMembersAddedActivity(membersAdded: ChannelAccount[], context: TurnContext): Promise<void> {
    // Check if the bot is the only member added
    if (context.activity.membersAdded?.length === 1 && context.activity.membersAdded[0].id === context.activity.recipient.id) {
      // Send a welcome message
      await context.sendActivity('Thank you for installing me!');

      // Create an adaptive card
      const card = {
        contentType: 'application/vnd.microsoft.card.adaptive',
        content: {
          type: 'AdaptiveCard',
          body: [
            {
              type: 'TextBlock',
              text: 'Thank you for installing me!',
              weight: 'bolder',
              size: 'medium'
            }
          ]
        }
      };

      // Send the adaptive card as an attachment
      await context.sendActivity({ attachments: [card] });
    }
  }
}

Please refer these sample as well which send welcome messages

  1. https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/b911df910ddff73cd1a7b464bff37ffcfdfe8530/samples/bot-ai-enterprise-search/nodejs/teamsBot.ts#L130
  2. https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/b911df910ddff73cd1a7b464bff37ffcfdfe8530/samples/bot-all-cards/csharp/BotAllCards/Bots/TeamsBot.cs#L36

Upvotes: 0

Related Questions