웹사이트에 WhatsApp 채팅 추가 - 반응 및 HTML

WhatsApp은 현재 세계에서 가장 많이 사용되는 커뮤니케이션용 소셜 미디어 플랫폼 중 하나입니다. 필요한 것은 휴대폰 번호뿐이라는 사실이 매우 적합합니다.

이동:

React Website

HTML Website

Conclusion

너무 수용 가능해 졌기 때문에 많은 사람들이 웹 사이트에서 채팅을 원합니다. 이 튜토리얼에서는 웹사이트에 WhatsApp Chat을 추가하는 방법을 보여드리겠습니다. 우리는 REACT 웹사이트와 HTML 웹사이트를 사용할 것입니다.

리액트 웹사이트.

우리는 우리가 만든 웹사이트를 사용할 것입니다. here에서 프로젝트를 복제하십시오.

npm install로 종속성을 설치합니다.

달리다 npm start

WhatsApp 채팅을 추가하려면 세(3) 단계만 거치면 됩니다.

먼저 head 파일의 index.html에 다음 글꼴 멋진 링크를 추가합니다.

<!-- font awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

둘째, 다음 코드를 App.js 파일에 표시하려는 닫는 태그 바로 앞에 추가합니다.

{/* WhatsApp icon */}
      <a
        href="https://wa.me/2348100000000"
        class="whatsapp_float"
        target="_blank"
        rel="noopener noreferrer"
      >
        <i class="fa fa-whatsapp whatsapp-icon"></i>
      </a>

Ensure to replace the mobile number (2348100000000) with yours or any number that is to be contacted from your website

웹사이트 하단에 WhatsApp 아이콘이 있어야 합니다.

마지막으로 다음 CSS 코드를 App.css에 추가합니다.

      /* for desktop */
      .whatsapp_float {
          position: fixed;
          width: 60px;
          height: 60px;
          bottom: 40px;
          right: 40px;
          background-color: #25d366;
          color: #FFF;
          border-radius: 50px;
          text-align: center;
          font-size: 30px;
          box-shadow: 2px 2px 3px #999;
          z-index: 100;
      }

      .whatsapp-icon {
          margin-top: 16px;
      }

      /* for mobile */
      @media screen and (max-width: 767px) {
          .whatsapp-icon {
              margin-top: 10px;
          }

          .whatsapp_float {
              width: 40px;
              height: 40px;
              bottom: 20px;
              right: 10px;
              font-size: 22px;
          }
      }

이렇게 하면 아이콘이 실제로 WhatsApp 아이콘처럼 보입니다. 또한 해당 페이지의 어느 지점에서나 고정되고 표시됩니다.

모든 코드here

축하합니다!!! 방문자는 이제 REACT 웹사이트에서 연락할 수 있습니다. Conclusion에서 추가 정보 보기

HTML 웹사이트

우리는 우리가 만든 웹사이트를 사용할 것입니다. here에서 프로젝트를 복제하십시오.

여기에 WhatsApp 채팅을 추가하는 것도 3단계만 거치면 됩니다.

먼저 head 파일의 index.html에 다음 글꼴 멋진 링크를 추가합니다.

<!-- font awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

둘째, Index.html 파일에서 표시하려는 바닥글 태그 바로 뒤에 다음 코드를 추가합니다.

{/* WhatsApp icon */}
      <a
        href="https://wa.me/2348100000000"
        class="whatsapp_float"
        target="_blank"
        rel="noopener noreferrer"
      >
        <i class="fa fa-whatsapp whatsapp-icon"></i>
      </a>

Ensure to replace the mobile number (2348100000000) with yours or any number that is to be contacted from your website

웹사이트 하단에 WhatsApp 아이콘이 있어야 합니다.

마지막으로 다음 CSS 코드를 styles.css에 추가합니다.

      /* for desktop */
      .whatsapp_float {
          position: fixed;
          width: 60px;
          height: 60px;
          bottom: 40px;
          right: 40px;
          background-color: #25d366;
          color: #FFF;
          border-radius: 50px;
          text-align: center;
          font-size: 30px;
          box-shadow: 2px 2px 3px #999;
          z-index: 100;
      }

      .whatsapp-icon {
          margin-top: 16px;
      }

      /* for mobile */
      @media screen and (max-width: 767px) {
          .whatsapp-icon {
              margin-top: 10px;
          }

          .whatsapp_float {
              width: 40px;
              height: 40px;
              bottom: 20px;
              right: 10px;
              font-size: 22px;
          }
      }

이렇게 하면 아이콘이 실제로 WhatsApp 아이콘처럼 보입니다. 또한 해당 페이지의 어느 지점에서나 고정되고 표시됩니다.

모든 코드는 here입니다.

라이브 웹사이트here

이제 웹사이트는 다음과 같이 보입니다.



그게 다야!!! 웹사이트 경험이 향상되었습니다...

결론

간단한 3단계로 웹사이트에 WhatsApp Chat을 추가하는 방법을 살펴보았습니다. 첫째, 멋진 글꼴에 대한 링크를 추가하고, 둘째, WhatsApp 채팅에 연결된 WhatsApp 아이콘을 추가하고, 마지막으로 매력적으로 보이도록 스타일을 지정하고 사용자가 어디에 있든 웹 사이트에 고정됩니다.

모바일 장치에서는 사용자가 WhatsApp 애플리케이션으로 리디렉션되고 채팅이 시작되므로 모바일 장치에서 경험이 더 좋습니다. 그러나 데스크톱에서는 WhatsApp 애플리케이션을 다운로드하도록 리디렉션됩니다.

웹 사이트 경험을 계속해서 멋지게 만드십시오.

읽어 주셔서 감사합니다!!!