how do import the Skype object using react js?

could anyone help me out here? Just trying to embed a simple Skype button in my react app, but due to my apparent lack of understanding of modules, imports, webpack, and how create-react-app actually does what it does, I can't access the Skype object. It's not defined.

I have followed instructions

https://www.skype.com/en/developer/create-contactme-buttons/

I have linked to the skype js using a script tag in my index.html's <script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>

inside my main js file, using create-react-app:

loadSkype() {
        Skype.ui({
          "name": "dropdown",
          "element": "SkypeButton_Call_john23",
          "participants": ["john23"],
          "imageSize": 32
          })
      }

I can not access the Skype object. Any ideas?

The instructions make it sound really simple: copy and paste the following code:

<script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>
<div id="SkypeButton_Call_john23_1">
 <script type="text/javascript">
 Skype.ui({
 "name": "call",
 "element": "SkypeButton_Call_john23_1",
 "participants": ["john23"]
 });
 </script>
</div>

Solution

On your index.html you need import the skype library:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>React App</title>
</head>

<body>
    <div id="root"></div>
    <script type="text/javascript" src="https://secure.skypeassets.com/i/scom/js/skype-uri.js"></script>
</body>
</html>

Then create a component for skype and import it whenever you want to use it:

import React from "react";
import { render } from "react-dom";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

class SkypeBT extends React.Component {
  componentDidMount() {
    Skype.ui({
      name: "dropdown",
      element: "SkypeButton_Call_john23",
      participants: ["john23"],
      imageSize: 32
    });
  }

  render() {
    return <div id="SkypeButton_Call_john23" />;
  }
}

const App = () => (
  <div style={styles}>
    <h2>Call me</h2>
    <SkypeBT />
  </div>
);

render(<App />, document.getElementById("root"));

You can fid a working version in here