Props

attendents

Type	Required
Array	false

Array with the necessary data to create the contact list

Properties

• app: String with the name of the app. (Note: Used to generate the link and icon in the avatar);
• label: Additional information, such as job or position.
• name: Name of user;
• id (optional): Only used to WeChat, Twitter and FB Messenger;
• number (optional): Only used to WhatsApp and Viber app;
• username (optional): Only used to Telegram and Line;
• href (optional): User to custom link;
• avatar
  • src: Path or CDN to image avatar;
  • alt: Alternative text to user avatar;

TIP

Apps that VueSocialChat supports in generating links and icons:
whatsapp, telegram, messenger, wechat, viber and line

e.g.

[
  {
    app: 'whatsapp',
    label: 'Technical support',
    name: 'Alan Ktquez',
    number: '5581983383532',
    avatar: {
      src: 'https://avatars0.githubusercontent.com/u/8084606?s=460&u=20b6499a416cf7129a18e5c168cf387e159edb1a&v=4',
      alt: 'Alan Ktquez avatar'
    }
  }
]

icon

Type	default
Boolean	false

Used to adapt the style of the button for the use of icons. (Note: If using text, you don't need to use this property)

<template>
  <div class='layout'>
    <!-- ommited -->
    <SocialChat
      icon
      :attendants="attendants"
    >
      <MyWhatsAppIcon slot="button" />  
    </SocialChat>
  </div>
</template>

dir

Type	default
String	ltr

Specifies the direction of the element's content.

• See demo, opens in a new window

TIP

See more about Structural markup and right-to-left text in HTML, opens in a new window