diff --git a/README.txt b/README.md
similarity index 83%
rename from README.txt
rename to README.md
index d301e6366867cfe0da661f1a56f02f09e7c9f666..d3ba8178544264cd638dc4f908a13083a70534d1 100644
--- a/README.txt
+++ b/README.md
@@ -1,8 +1,7 @@
 Description
 -----------
-This module provides a field to integrate 
-with Skype buttons and Skype URI's. 
-The module contains 2 formatters, both configurable.
+This module provides a field to integrate with Skype buttons and Skype URI's. 
+It also provides integration with Skype chat canvas.
 
 Installation
 ------------
diff --git a/config/install/skype.settings.yml b/config/install/skype.settings.yml
new file mode 100644
index 0000000000000000000000000000000000000000..d2c697aaacda798a6bfb47bb79cbc7c7af1582cd
--- /dev/null
+++ b/config/install/skype.settings.yml
@@ -0,0 +1,15 @@
+enable_chat: false
+message_recipient: 'data-contact-id'
+chat_id: ''
+initiate_chat: 'skype-button'
+button_style: 'bubble'
+text_only: false
+button_text: ''
+button_color: ''
+chat_can_collapse: false
+chat_can_close: true
+chat_can_upload_file: true
+chat_enable_animation: true
+chat_enable_header: true
+exclude_mode: 0
+exclude_pages: ''
\ No newline at end of file
diff --git a/config/schema/skype.schema.yml b/config/schema/skype.schema.yml
index 9c5d8402191e15a098d47122c2d2e54740e7a2d7..fb26f40c3f96f0cfd9c81cb49c7360275ef86621 100644
--- a/config/schema/skype.schema.yml
+++ b/config/schema/skype.schema.yml
@@ -8,4 +8,55 @@ field.skype.value:
       mapping:
         value:
           type: string
-          label: 'Value'
\ No newline at end of file
+          label: 'Value'
+
+# Schema for the skype settings.
+skype.settings:
+  type: config_object
+  label: 'Skype settings'
+  mapping:
+    enable_chat:
+      type: boolean
+      label: 'Enable/disable chat'
+    message_recipient:
+      type: string
+      label: 'Message recipient'
+    chat_id:
+      type: string
+      label: 'Chat ID'
+    initiate_chat:
+      type: string
+      label: 'Initiate chat'
+    button_style:
+      type: string
+      label: 'Button style'
+    text_only:
+      type: boolean
+      label: 'Text only'
+    button_text:
+      type: string
+      label: 'Button text'
+    button_color:
+      type: string
+      label: 'Buttons color'
+    chat_can_collapse:
+      type: boolean
+      label: 'Chat can collapse'
+    chat_can_close:
+      type: boolean
+      label: 'Chat can close'
+    chat_can_upload_file:
+      type: boolean
+      label: 'Chat can upload file'
+    chat_enable_animation:
+      type: boolean
+      label: 'Chat enable animation'
+    chat_enable_header:
+      type: boolean
+      label: 'Chat enable header'
+    exclude_mode:
+      type: integer
+      label: 'Exclude mode'
+    exclude_pages:
+      type: string
+      label: 'Exclude pages'
\ No newline at end of file
diff --git a/skype.info.yml b/skype.info.yml
index c16df415d2480c505004243e3fcbb79a44792d4c..73e928fda54821f2cf6d293c0bed54874317ecfa 100644
--- a/skype.info.yml
+++ b/skype.info.yml
@@ -1,8 +1,8 @@
 name: Skype
 type: module
-description: 'Provides a skype field to call/chat/video-call.'
+description: 'Provides a skype field to call/chat/video-call and integration with chat canvas.'
 core: 8.x
 package: Field types
-# version: VERSION
+configure: skype.settings.form
 dependencies:
   - field
\ No newline at end of file
diff --git a/skype.libraries.yml b/skype.libraries.yml
index c05d4f2fc02deefe1621d4f96751aa0b0711bd28..2dd3735f1b5f9ea9e837c8268be80b2400379505 100644
--- a/skype.libraries.yml
+++ b/skype.libraries.yml
@@ -1,10 +1,14 @@
 skype.library:
-  version: 1.x
+  version: VERSION
   header: true
   js:
     http://www.skypeassets.com/i/scom/js/skype-uri.js: {type: external, weight: -10}
 skype.library.secure:
-  version: 1.x
+  version: VERSION
   header: true
   js:
-    https://secure.skypeassets.com/i/scom/js/skype-uri.js: {type: external, weight: -10}
\ No newline at end of file
+    https://secure.skypeassets.com/i/scom/js/skype-uri.js: {type: external, weight: -10}
+skype.chat.canvas:
+  version: VERSION
+  js:
+    https://swc.cdn.skype.com/sdk/v1/sdk.min.js: {type: external}
\ No newline at end of file
diff --git a/skype.links.menu.yml b/skype.links.menu.yml
new file mode 100644
index 0000000000000000000000000000000000000000..f5a5ca1a7f30cfdb1f98ccd6982d995c09a5e096
--- /dev/null
+++ b/skype.links.menu.yml
@@ -0,0 +1,5 @@
+skype.settings.form:
+  title: 'Skype'
+  description: 'Configure skype.'
+  route_name: skype.settings.form
+  parent: system.admin_config_ui
diff --git a/skype.module b/skype.module
index 50aa3e23c0aaaa1969c49656c100f2448f59b1c1..1372098b259bb1eaaad879aee88cd218338abcd1 100644
--- a/skype.module
+++ b/skype.module
@@ -11,7 +11,7 @@ use Drupal\Core\Routing\RouteMatchInterface;
 function skype_help($route_name, RouteMatchInterface $route_match) {
   switch ($route_name) {
     case 'help.page.skype':
-      $output = file_get_contents(drupal_get_path('module', 'single_page_site') . '/README.txt');
+      $output = file_get_contents(drupal_get_path('module', 'skype') . '/README.md');
       return '<pre>' . $output . '</pre>';
   }
 }
@@ -20,14 +20,54 @@ function skype_help($route_name, RouteMatchInterface $route_match) {
  * Implements hook_theme().
  */
 function skype_theme() {
-  return array(
-    'skype_button' => array(
-      'variables' => array('skype_id' => NULL, 'settings' => array()),
-    ),
-    'skype_uri' => array(
-      'variables' => array('skype_id' => NULL, 'settings' => array()),
-    ),
-  );
+  return [
+    'skype_button' => [
+      'variables' => ['skype_id' => NULL, 'settings' => []],
+      'template' => 'skype-button',
+    ],
+    'skype_uri' => [
+      'variables' => ['skype_id' => NULL, 'settings' => []],
+      'template' => 'skype-uri',
+    ],
+    'skype_chat_canvas' => [
+      'variables' => [
+        'message_recipient' => NULL,
+        'chat_id' => NULL,
+        'attributes' => [],
+      ],
+      'template' => 'skype-chat-canvas',
+    ],
+  ];
+}
+
+/**
+ * Implements hook_page_attachments().
+ */
+function skype_page_attachments(array &$attachments) {
+  /** @var \Drupal\skype\Manager\SkypeManager $manager */
+  $manager = Drupal::service('skype.manager');
+
+  if ($manager->loadSkypeChatCanvas()) {
+    $attachments['#attached']['library'][] = 'skype/skype.chat.canvas';
+  }
+}
+
+/**
+ * Implements hook_page_bottom().
+ */
+function skype_page_bottom(array &$page_bottom) {
+  /** @var \Drupal\skype\Manager\SkypeManager $manager */
+  $manager = Drupal::service('skype.manager');
+
+  if ($manager->loadSkypeChatCanvas()) {
+    $page_bottom['skype'] = [
+      '#theme' => 'skype_chat_canvas',
+      '#message_recipient' => $manager->getMessageRecipient(),
+      '#chat_id' => $manager->getChatId(),
+      '#attributes' => $manager->getAttributes(),
+    ];
+  }
+
 }
 
 /**
diff --git a/skype.routing.yml b/skype.routing.yml
new file mode 100644
index 0000000000000000000000000000000000000000..fb236bdadd80b44207cf20796d61a401ebf0c161
--- /dev/null
+++ b/skype.routing.yml
@@ -0,0 +1,7 @@
+skype.settings.form:
+  path: '/admin/config/user-interface/skype'
+  defaults:
+    _form: 'Drupal\skype\Form\SkypeSettingsForm'
+    _title: 'Skype Settings'
+  requirements:
+    _permission: 'administer site configuration'
diff --git a/skype.services.yml b/skype.services.yml
new file mode 100644
index 0000000000000000000000000000000000000000..4046ed7dd5f983ba0c332233525922ce025546dc
--- /dev/null
+++ b/skype.services.yml
@@ -0,0 +1,4 @@
+services:
+  skype.manager:
+    class: Drupal\skype\Manager\SkypeManager
+    arguments: ['@config.factory', '@path.current', '@path.alias_manager', '@path.matcher']
\ No newline at end of file
diff --git a/src/Form/SkypeSettingsForm.php b/src/Form/SkypeSettingsForm.php
new file mode 100644
index 0000000000000000000000000000000000000000..3a5b55cfc0f589a383c89d7e142c20f0eeb868ce
--- /dev/null
+++ b/src/Form/SkypeSettingsForm.php
@@ -0,0 +1,285 @@
+<?php
+
+namespace Drupal\skype\Form;
+
+use Drupal\Core\Config\ConfigFactoryInterface;
+use Drupal\Core\Form\ConfigFormBase;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Class SkypeSettingsForm
+ * @package Drupal\skype\Form
+ */
+class SkypeSettingsForm extends ConfigFormBase {
+
+  protected $enabled;
+  protected $buttonStyle;
+  protected $initiateChat;
+
+  /**
+   * SkypeSettingsForm constructor.
+   * @param \Drupal\Core\Config\ConfigFactoryInterface $config_factory
+   */
+  public function __construct(\Drupal\Core\Config\ConfigFactoryInterface $config_factory) {
+    parent::__construct($config_factory);
+    $config = $this->config('skype.settings');
+    $this->enabled = $config->get('enable_chat');
+    $this->initiateChat = $config->get('initiate_chat');
+    $this->buttonStyle = $config->get('button_style');
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFormId() {
+    return 'skype_settings_form';
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getEditableConfigNames() {
+    return ['skype.settings'];
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildForm(array $form, FormStateInterface $form_state) {
+    $config = $this->config('skype.settings');
+
+    $form['#prefix'] = '<div id="skype-settings-ajax-wrapper">';
+    $form['#suffix'] = '</div>';
+
+    $ajax = [
+      'wrapper' => 'skype-settings-ajax-wrapper',
+      'callback' => '::ajaxRefreshForm',
+      'trigger_as' => ['name' => 'dummy_submit'],
+    ];
+    $form['enable_chat'] = [
+      '#type' => 'checkbox',
+      '#title' => $this->t('Enable chat canvas'),
+      '#default_value' => $config->get('enable_chat'),
+      '#description' => $this->t('You can read the documentation on the Skype chat canvas <a href="@href" target="_blank">here</a>', ['@href' => 'https://dev.skype.com/webcontrol']),
+      '#ajax' => $ajax,
+    ];
+
+    $form['dummy_submit'] = [
+      '#type' => 'submit',
+      '#value' => $this->t('Submit'),
+      '#name' => 'dummy_submit',
+      '#ajax' => [
+        'wrapper' => 'skype-settings-ajax-wrapper',
+        'callback' => '::ajaxRefreshForm',
+      ],
+      '#submit' => ['::dummySubmit'],
+      '#attributes' => [
+        'class' => ['js-hide']
+      ]
+    ];
+
+    if ($this->enabled) {
+      $form['message_recipient'] = [
+        '#type' => 'radios',
+        '#title' => $this->t('Message recipient'),
+        '#options' => [
+          'data-bot-id' => 'Bot',
+          'data-contact-id' => $this->t('Skype user'),
+        ],
+        '#default_value' => $config->get('message_recipient'),
+        '#description' => $this->t('Note: if the recipient is a Skype user, then users will be prompted to sign in. (Because we want to prevent users from receiving spams)'),
+        '#required' => TRUE,
+      ];
+
+      $form['chat_id'] = [
+        '#type' => 'textfield',
+        '#title' => $this->t('Bot/Skype user ID'),
+        '#default_value' => $config->get('chat_id'),
+        '#description' => $this->t('Depends on the option chosen in "Message Recipient"'),
+        '#required' => TRUE,
+      ];
+
+      $form['initiate_chat'] = [
+        '#type' => 'radios',
+        '#title' => $this->t('Initiate chat'),
+        '#options' => [
+          'skype-button' => $this->t('Button'),
+          'skype-chat' => $this->t('Chat'),
+        ],
+        '#default_value' => $config->get('initiate_chat'),
+        '#description' => $this->t('Use a Skype button to initiate a chat or show the chat immediately'),
+        '#required' => TRUE,
+        '#ajax' => $ajax,
+      ];
+
+      if ($this->initiateChat == 'skype-button') {
+        $form['button_settings'] = [
+          '#type' => 'details',
+          '#title' => $this->t('Buttons settings'),
+          '#open' => TRUE,
+        ];
+
+        $form['button_settings']['button_style'] = [
+          '#type' => 'select',
+          '#title' => $this->t('Button style'),
+          '#options' => [
+            'bubble' => $this->t('Bubble'),
+            'rectangle' => $this->t('Rectangle'),
+            'rounded' => $this->t('Rounded'),
+          ],
+          '#default_value' => $config->get('button_style'),
+          '#description' => $this->t('Set an out-of-the-box style for the button'),
+          '#required' => TRUE,
+          '#ajax' => $ajax,
+        ];
+
+        if ($this->buttonStyle == 'rectangle' || $this->buttonStyle == 'rounded') {
+          $form['button_settings']['text_only'] = [
+            '#type' => 'checkbox',
+            '#title' => $this->t('Text only'),
+            '#default_value' => $config->get('text_only'),
+            '#description' => $this->t('Do not show the chat icon'),
+          ];
+
+          $form['button_settings']['button_text'] = [
+            '#type' => 'textfield',
+            '#title' => $this->t('Button text'),
+            '#default_value' => $config->get('button_text'),
+            '#description' => $this->t('Change the label of the button, eg: Contact')
+          ];
+
+          $form['button_settings']['button_color'] = [
+            '#type' => 'textfield',
+            '#title' => $this->t('Button color'),
+            '#default_value' => $config->get('button_color'),
+            '#description' => $this->t('Change the button color, eg: #00AFF0'),
+          ];
+        }
+      }
+      elseif ($this->initiateChat == 'skype-chat') {
+        $form['chat_settings'] = [
+          '#type' => 'details',
+          '#title' => $this->t('Chat settings'),
+          '#open' => TRUE,
+        ];
+
+        $form['chat_settings']['chat_can_collapse'] = [
+          '#type' => 'checkbox',
+          '#title' => 'Chat can collapse',
+          '#default_value' => $config->get('chat_can_collapse'),
+          '#description' => $this->t('Enables minimization functionality'),
+        ];
+
+        $form['chat_settings']['chat_can_close'] = [
+          '#type' => 'checkbox',
+          '#title' => 'Chat can close',
+          '#default_value' => $config->get('chat_can_close'),
+          '#description' => $this->t('Enables the close button'),
+        ];
+
+        $form['chat_settings']['chat_can_upload_file'] = [
+          '#type' => 'checkbox',
+          '#title' => 'Chat can upload file',
+          '#default_value' => $config->get('chat_can_upload_file'),
+          '#description' => $this->t('Enables the upload file button'),
+        ];
+
+        $form['chat_settings']['chat_enable_animation'] = [
+          '#type' => 'checkbox',
+          '#title' => 'Opening animation enabled',
+          '#default_value' => $config->get('chat_enable_animation'),
+          '#description' => $this->t('Enables the opening animation'),
+        ];
+
+        $form['chat_settings']['chat_enable_header'] = [
+          '#type' => 'checkbox',
+          '#title' => 'Header enabled',
+          '#default_value' => $config->get('chat_enable_header'),
+          '#description' => $this->t('Enables the conversation header'),
+        ];
+      }
+
+      $form['page_track'] = [
+        '#type' => 'details',
+        '#title' => $this->t('Pages'),
+        '#open' => TRUE,
+      ];
+
+      $form['page_track']['exclude_mode'] = [
+        '#type' => 'radios',
+        '#title' => $this->t('Add Skype chat canvas to specific pages'),
+        '#options' => [
+          0 => $this->t('Every page except the listed pages'),
+          1 => $this->t('The listed pages only'),
+        ],
+        '#default_value' => $config->get('exclude_mode'),
+        '#required' => TRUE,
+      ];
+
+      $form['page_track']['exclude_pages'] = [
+        '#type' => 'textarea',
+        '#title' => $this->t('Pages'),
+        '#title_display' => 'invisible',
+        '#default_value' => $config->get('exclude_pages'),
+        '#description' => $this->t("Specify pages by using their paths. Enter one path per line. The '*' character is a wildcard. Example paths are %blog for the blog page and %blog-wildcard for every personal blog. %front is the front page.\", ['%blog' => '/blog', '%blog-wildcard' => '/blog/*', '%front' => '<front>']"),
+        '#rows' => 10,
+      ];
+    }
+
+    return parent::buildForm($form, $form_state);
+  }
+
+  /**
+   * Ajax callback to refresh form.
+   * @param array $form
+   * @param \Drupal\Core\Form\FormStateInterface $form_state
+   * @return array
+   */
+  public function ajaxRefreshForm(array &$form, FormStateInterface $form_state) {
+    return $form;
+  }
+
+  /**
+   * Dummy submit callback to change rebuild form after ajax call.
+   * @param array $form
+   * @param \Drupal\Core\Form\FormStateInterface $form_state
+   */
+  public function dummySubmit(array &$form, FormStateInterface $form_state) {
+    $this->enabled = $form_state->getValue('enable_chat');
+    if (!empty($form_state->getValue('initiate_chat'))) {
+      $this->initiateChat = $form_state->getValue('initiate_chat');
+    }
+    if (!empty($form_state->getValue('button_style'))) {
+      $this->buttonStyle = $form_state->getValue('button_style');
+    }
+
+    $form_state->setRebuild(TRUE);
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+    $config = $this->config('skype.settings');
+    $config->set('enable_chat', $form_state->getValue('enable_chat'));
+    $config->set('message_recipient', $form_state->getValue('message_recipient'));
+    $config->set('chat_id', $form_state->getValue('chat_id'));
+    $config->set('initiate_chat', $form_state->getValue('initiate_chat'));
+    $config->set('button_style', $form_state->getValue('button_style'));
+    $config->set('text_only', $form_state->getValue('text_only'));
+    $config->set('button_text', $form_state->getValue('button_text'));
+    $config->set('button_color', $form_state->getValue('button_color'));
+    $config->set('chat_can_collapse', $form_state->getValue('chat_can_collapse'));
+    $config->set('chat_can_close', $form_state->getValue('chat_can_close'));
+    $config->set('chat_can_upload_file', $form_state->getValue('chat_can_upload_file'));
+    $config->set('chat_enable_animation', $form_state->getValue('chat_enable_animation'));
+    $config->set('chat_can_upload_file', $form_state->getValue('chat_can_upload_file'));
+    $config->set('chat_enable_header', $form_state->getValue('chat_enable_header'));
+    $config->set('exclude_mode', $form_state->getValue('exclude_mode'));
+    $config->set('exclude_pages', $form_state->getValue('exclude_pages'));
+
+    $config->save();
+
+    parent::submitForm($form, $form_state);
+  }
+}
\ No newline at end of file
diff --git a/src/Manager/SkypeManager.php b/src/Manager/SkypeManager.php
new file mode 100644
index 0000000000000000000000000000000000000000..4365fd5bb82bcafd119baa6ca52a8df52ee73ed8
--- /dev/null
+++ b/src/Manager/SkypeManager.php
@@ -0,0 +1,127 @@
+<?php
+
+namespace Drupal\skype\Manager;
+
+use Drupal\Component\Utility\Unicode;
+use Drupal\Core\Config\ConfigFactoryInterface;
+use Drupal\Core\Config\ImmutableConfig;
+use Drupal\Core\Path\AliasManagerInterface;
+use Drupal\Core\Path\CurrentPathStack;
+use Drupal\Core\Path\PathMatcherInterface;
+use Drupal\Core\Template\Attribute;
+
+class SkypeManager {
+
+  protected $config;
+  protected $currentPath;
+  protected $aliasManager;
+  protected $pathMatcher;
+
+  /**
+   * SkypeManager constructor.
+   * @param \Drupal\Core\Config\ConfigFactoryInterface $config_factory
+   * @param \Drupal\Core\Path\CurrentPathStack $current_path
+   * @param \Drupal\Core\Path\AliasManagerInterface $alias_manager
+   * @param \Drupal\Core\Path\PathMatcherInterface $path_matcher
+   */
+  public function __construct(ConfigFactoryInterface $config_factory, CurrentPathStack $current_path, AliasManagerInterface $alias_manager, PathMatcherInterface $path_matcher) {
+    $this->config = $config_factory->get('skype.settings');
+    $this->currentPath = $current_path;
+    $this->aliasManager = $alias_manager;
+    $this->pathMatcher = $path_matcher;
+  }
+
+  /**
+   * Checks if shield has to be shown on current page.
+   * @return bool
+   */
+  public function loadSkypeChatCanvas() {
+    $page_match = &drupal_static(__FUNCTION__);
+
+    if (!$this->config->get('enable_chat')) {
+      return FALSE;
+    }
+
+    // Cache visibility result if function is called more than once.
+    if (!isset($page_match)) {
+      $visibility_path_mode = $this->config->get('exclude_mode');
+      $visibility_path_pages = $this->config->get('exclude_pages');
+
+      // Match path if necessary.
+      if (!empty($visibility_path_pages)) {
+        // Convert path to lowercase. This allows comparison of the same path
+        // with different case. Ex: /Page, /page, /PAGE.
+        $pages = Unicode::strtolower($visibility_path_pages);
+        // Compare the lowercase path alias (if any) and internal path.
+        $path = $this->currentPath->getPath();
+        $path_alias = Unicode::strtolower($this->aliasManager->getAliasByPath($path));
+        $page_match = $this->pathMatcher->matchPath($path_alias, $pages) || (($path != $path_alias) && $this->pathMatcher->matchPath($path, $pages));
+        // When $visibility_request_path_mode has a value of 0, the shield
+        // is displayed on all pages except those listed in $pages. When
+        // set to 1, it is displayed only on those pages listed in $pages.
+        $page_match = !($visibility_path_mode xor $page_match);
+      }
+      else {
+        $page_match = TRUE;
+      }
+
+    }
+    return $page_match;
+  }
+
+  /**
+   * Returns message recipient.
+   * @return string
+   */
+  public function getMessageRecipient() {
+    return $this->config->get('message_recipient');
+  }
+
+  /**
+   * Returns chat id.
+   * @return string
+   */
+  public function getChatId() {
+    return $this->config->get('chat_id');
+  }
+
+  /**
+   * Returns atrributes.
+   * @return \Drupal\Core\Template\Attribute
+   */
+  public function getAttributes() {
+    $attributes = [];
+    $classes = [$this->config->get('initiate_chat')];
+
+    $initiate_chat = $this->config->get('initiate_chat');
+    $button_style = $this->config->get('button_style');
+    if ($initiate_chat == 'skype-button') {
+      // If button is chosen, add class to indicate button style.
+      array_push($classes, $button_style);
+
+      if ($button_style == 'rectangle' || $button_style == 'rounded') {
+        // Allow to add button text and button color.
+        if ($button_text = $this->config->get('button_text')) {
+          $attributes['data-text'] = $button_text;
+        }
+        if ($button_color = $this->config->get('button_color')) {
+          $attributes['data-color'] = $button_color;
+        }
+
+        if($this->config->get('text_only')){
+          array_push($classes, 'textonly');
+        }
+      }
+    }elseif ($initiate_chat == 'skype-chat') {
+      $attributes['data-can-collapse'] = $this->config->get('chat_can_collapse') ? 'true': 'false';
+      $attributes['data-can-close'] = $this->config->get('chat_can_close') ? 'true': 'false';
+      $attributes['data-can-upload-file'] = $this->config->get('chat_can_upload_file') ? 'true': 'false';
+      $attributes['data-entry-animation'] = $this->config->get('chat_enable_animation') ? 'true': 'false';
+      $attributes['data-show-header'] = $this->config->get('chat_enable_header') ? 'true': 'false';
+    }
+    $attributes['class'] = $classes;
+
+    return new Attribute($attributes);
+  }
+
+}
\ No newline at end of file
diff --git a/src/Plugin/Field/FieldFormatter/SkypeButtonFormatter.php b/src/Plugin/Field/FieldFormatter/SkypeButtonFormatter.php
index 97a319e903e05d15f172e3363724dd3962977a53..25ef2c8d76e7e23ac60eafc4ce0a0121a40642f7 100644
--- a/src/Plugin/Field/FieldFormatter/SkypeButtonFormatter.php
+++ b/src/Plugin/Field/FieldFormatter/SkypeButtonFormatter.php
@@ -49,53 +49,53 @@ class SkypeButtonFormatter extends FormatterBase {
    * {@inheritdoc}
    */
   public static function defaultSettings() {
-    return array(
-      'actions' => array('call', 'chat'),
-      'image_color' => 'blue',
-      'image_size' => 32,
-    ) + parent::defaultSettings();
+    return [
+        'actions' => ['call', 'chat'],
+        'image_color' => 'blue',
+        'image_size' => 32,
+      ] + parent::defaultSettings();
   }
 
   /**
    * {@inheritdoc}
    */
   public function settingsForm(array $form, FormStateInterface $form_state) {
-    $elements['actions'] = array(
+    $elements['actions'] = [
       '#type' => 'checkboxes',
       '#title' => t('Choose what you\'d like your button to do:'),
-      '#options' => array(
+      '#options' => [
         'call' => t('Call'),
         'chat' => t('Chat'),
-      ),
+      ],
       '#default_value' => $this->getSetting('actions'),
       '#required' => TRUE,
-    );
+    ];
 
-    $elements['image_color'] = array(
+    $elements['image_color'] = [
       '#type' => 'select',
       '#title' => t('Choose how you want your button to look:'),
-      '#options' => array(
+      '#options' => [
         'blue' => t('Blue'),
         'white' => t('White'),
-      ),
+      ],
       '#default_value' => $this->getSetting('image_color'),
       '#required' => TRUE,
-    );
+    ];
 
-    $elements['image_size'] = array(
+    $elements['image_size'] = [
       '#type' => 'select',
       '#title' => t('Choose the size of your button:'),
-      '#options' => array(
+      '#options' => [
         10 => '10px',
         12 => '12px',
         14 => '14px',
         16 => '16px',
         24 => '24px',
         32 => '32px',
-      ),
+      ],
       '#default_value' => $this->getSetting('image_size'),
       '#required' => TRUE,
-    );
+    ];
 
     return $elements;
   }
@@ -104,16 +104,16 @@ class SkypeButtonFormatter extends FormatterBase {
    * {@inheritdoc}
    */
   public function settingsSummary() {
-    $summary = array();
+    $summary = [];
     $settings = $this->getSettings();
 
     $actions = array_filter($settings['actions']);
     $summary[] = t('Button action(s): @actions',
-      array('@actions' => implode(', ', $actions)));
+      ['@actions' => implode(', ', $actions)]);
     $summary[] = t('Button color: @color',
-      array('@color' => $settings['image_color']));
+      ['@color' => $settings['image_color']]);
     $summary[] = t('Button size: @sizepx',
-      array('@size' => $settings['image_size']));
+      ['@size' => $settings['image_size']]);
 
     return $summary;
   }
@@ -122,7 +122,7 @@ class SkypeButtonFormatter extends FormatterBase {
    * {@inheritdoc}
    */
   public function viewElements(FieldItemListInterface $items, $langcode) {
-    $element = array();
+    $element = [];
     $settings = $this->getSettings();
 
     $library = 'skype/skype.library';
@@ -132,17 +132,15 @@ class SkypeButtonFormatter extends FormatterBase {
 
     foreach ($items as $delta => $item) {
       // Render each element as skype button.
-      $element[$delta] = array(
+      $element[$delta] = [
         '#theme' => 'skype_button',
         '#skype_id' => $item->value,
         '#settings' => $settings,
         '#langcode' => $item->getLangcode(),
-        '#attached' => array(
-          'library' => array(
-            $library
-          ),
-        ),
-      );
+        '#attached' => [
+          'library' => [$library],
+        ],
+      ];
     }
 
     return $element;
diff --git a/src/Plugin/Field/FieldFormatter/SkypeUriFormatter.php b/src/Plugin/Field/FieldFormatter/SkypeUriFormatter.php
index 969d6c87118737b91e2bc422ff4832de97164a0b..7e560fd674144dee3660d84b299ab92b627d776c 100644
--- a/src/Plugin/Field/FieldFormatter/SkypeUriFormatter.php
+++ b/src/Plugin/Field/FieldFormatter/SkypeUriFormatter.php
@@ -28,35 +28,35 @@ class SkypeUriFormatter extends FormatterBase {
    * {@inheritdoc}
    */
   public static function defaultSettings() {
-    return array(
-      'link_text' => t('Skype me'),
-      'action' => 'call',
-        ) + parent::defaultSettings();
+    return [
+        'link_text' => t('Skype me'),
+        'action' => 'call',
+      ] + parent::defaultSettings();
   }
 
   /**
    * {@inheritdoc}
    */
   public function settingsForm(array $form, FormStateInterface $form_state) {
-    $elements['action'] = array(
+    $elements['action'] = [
       '#type' => 'radios',
       '#title' => t('Choose what you\'d like your URI to do:'),
-      '#options' => array(
+      '#options' => [
         'call' => t('Call'),
         'video' => t('Video chat'),
         'chat' => t('Chat'),
-      ),
+      ],
       '#default_value' => $this->getSetting('action'),
       '#required' => TRUE,
-    );
+    ];
 
-    $elements['link_text'] = array(
+    $elements['link_text'] = [
       '#type' => 'textfield',
       '#title' => t('Choose the link text:'),
       '#default_value' => $this->getSetting('link_text'),
       '#required' => TRUE,
       '#description' => t('For example: "Call me" or "Video chat with me". You can use [skype:id] as token to use in your link text.'),
-    );
+    ];
 
     return $elements;
   }
@@ -65,12 +65,12 @@ class SkypeUriFormatter extends FormatterBase {
    * {@inheritdoc}
    */
   public function settingsSummary() {
-    $summary = array();
+    $summary = [];
     $settings = $this->getSettings();
 
     $summary[] = t('URI action: @actions',
-        array('@actions' => $settings['action']));
-    $summary[] = t('URI text: @text', array('@text' => $settings['link_text']));
+      ['@actions' => $settings['action']]);
+    $summary[] = t('URI text: @text', ['@text' => $settings['link_text']]);
 
     return $summary;
   }
@@ -79,17 +79,17 @@ class SkypeUriFormatter extends FormatterBase {
    * {@inheritdoc}
    */
   public function viewElements(FieldItemListInterface $items, $langcode) {
-    $element = array();
+    $element = [];
     $settings = $this->getSettings();
 
     foreach ($items as $delta => $item) {
       // Render each element as skype URI.
-      $element[$delta] = array(
+      $element[$delta] = [
         '#theme' => 'skype_uri',
         '#skype_id' => $item->value,
         '#settings' => $settings,
         '#langcode' => $item->getLangcode(),
-      );
+      ];
     }
 
     return $element;
diff --git a/src/Plugin/Field/FieldType/SkypeItem.php b/src/Plugin/Field/FieldType/SkypeItem.php
index ad4267841eb005681aaf0501c666b2a444f22fa8..bfd9a729d88d058ea269ff682fa4180b7c6f1202 100644
--- a/src/Plugin/Field/FieldType/SkypeItem.php
+++ b/src/Plugin/Field/FieldType/SkypeItem.php
@@ -30,16 +30,16 @@ class SkypeItem extends FieldItemBase {
    * {@inheritdoc}
    */
   public static function schema(FieldStorageDefinitionInterface $field_definition) {
-    return array(
-      'columns' => array(
-        'value' => array(
+    return [
+      'columns' => [
+        'value' => [
           'type' => 'varchar',
           'not null' => TRUE,
           'default' => 0,
           'length' => 255,
-        ),
-      ),
-    );
+        ],
+      ],
+    ];
   }
 
   /**
@@ -47,7 +47,7 @@ class SkypeItem extends FieldItemBase {
    */
   public static function propertyDefinitions(FieldStorageDefinitionInterface $field_definition) {
     $properties['value'] = DataDefinition::create('string')
-        ->setLabel(t('Skype ID'));
+      ->setLabel(t('Skype ID'));
 
     return $properties;
   }
diff --git a/src/Plugin/Field/FieldWidget/SkypeDefaultWidget.php b/src/Plugin/Field/FieldWidget/SkypeDefaultWidget.php
index ba973bcee32da76ee9b924a0ca90355b7d0e61fe..bc4f1c6e3063a296f172bf5a2f74ed936557d78c 100644
--- a/src/Plugin/Field/FieldWidget/SkypeDefaultWidget.php
+++ b/src/Plugin/Field/FieldWidget/SkypeDefaultWidget.php
@@ -36,13 +36,13 @@ class SkypeDefaultWidget extends WidgetBase {
    * {@inheritdoc}
    */
   public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
-    $element['value'] = $element + array(
-      '#attributes' => array('class' => array('edit-skype-fields-skype-id')),
+    $element['value'] = $element + [
+      '#attributes' => ['class' => ['edit-skype-fields-skype-id']],
       '#type' => 'textfield',
       '#default_value' => isset($items[$delta]->value) ? $items[$delta]->value : NULL,
       '#prefix' => '<div class="skype-fields-skype-id-field">',
       '#suffix' => '</div>',
-    );
+    ];
     return $element;
   }
 
diff --git a/templates/skype-chat-canvas.html.twig b/templates/skype-chat-canvas.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..4e5a491eefafff510f9b26b551e3447754546762
--- /dev/null
+++ b/templates/skype-chat-canvas.html.twig
@@ -0,0 +1 @@
+<div {{ attributes }} {{ message_recipient }}="{{ chat_id }}"></div>
\ No newline at end of file