{"id":6296,"date":"2024-04-14T19:10:08","date_gmt":"2024-04-14T11:10:08","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6296"},"modified":"2024-04-14T19:10:08","modified_gmt":"2024-04-14T11:10:08","slug":"insert-whatsapp-using-elfsight","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/insert-whatsapp-using-elfsight\/","title":{"rendered":"Insert WhatsApp using Elfsight"},"content":{"rendered":"\n
\n

Discover the process to insert a WhatsApp chat widget in your Webflow website using Elfsight in 4 simple steps:<\/p>\n

    \n
  1. Generate widget in Elfsight<\/li>\n
  2. Duplicate the code<\/li>\n
  3. Embed the code into Webflow<\/li>\n
  4. Finalize and Test<\/li>\n<\/ol>\n

    If you haven’t set up an Elfsight<\/a> account yet, establish one to explore various widgets. Specifically, for this guide, you’ll require the WhatsApp chat<\/strong> widget.<\/p>\n

    \n
    <\/div>\n<\/figure>\n

    <\/p>\n

    Upon logging into Elfsight, navigate to the Application<\/strong> page and search for WhatsApp. From there, select the WhatsApp chat<\/strong> option to create the widget.<\/p>\n

    Generate a widget in Elfsight<\/h2>\n
    \n
    <\/div>\n<\/figure>\n

    <\/p>\n

    Once you’ve acquired the WhatsApp widget, opt for a template:<\/p>\n

      \n
    1. Name your widget (e.g., WhatsApp embed)<\/li>\n
    2. Select a widget layout template<\/li>\n
    3. Tap Continue with the template<\/strong><\/li>\n<\/ol>\n

      <\/p>\n

      \n
      <\/div>\n<\/figure>\n

      Next, proceed with customization:<\/p>\n

        \n
      1. Content<\/li>\n
      2. Settings<\/li>\n
      3. Design<\/li>\n<\/ol>\n

        Commence by entering your WhatsApp phone number under the Content<\/strong> section and then tailor your widget to match your Webflow project.<\/p>\n

        Content<\/h3>\n

        The Content<\/strong> feature enables you to modify the:\u00a0<\/p>\n

          \n
        • Chat Bubble<\/li>\n
        • Chat Header<\/li>\n
        • Welcome Message<\/li>\n
        • Start Chat button<\/li>\n<\/ul>\n

          Chat bubble<\/h4>\n

          Tapping the Chat Bubble<\/strong> option enables you to pick a chat bubble icon and input custom Bubble Text<\/strong> to display beside your icon (remains empty if no text is added).<\/p>\n

          \n