How can I add an intercom custom launcher from a button in webflow without making the standard launcher disappear?
To add an Intercom custom launcher from a button in Webflow without making the standard launcher disappear, follow these steps:
Create a button: Start by adding a button to your Webflow project. You can drag and drop the button element onto your page or use a link block to wrap any element as a button.
Edit button style: Customize the button's design, such as its size, color, and text. You can do this by clicking on the button element and accessing the Style tab in the right sidebar. Make sure your button stands out and is easily noticeable.
Add Intercom script: Go to your Intercom account and locate the custom launcher code. It is usually found under the "Install Intercom" section in the settings. Copy the script code provided.
Open Webflow Custom Code: In Webflow, navigate to the Project Settings and click on the Custom Code tab. You have the option to add code to your head or body section. In this case, choose the body section.
Paste Intercom script: Inside the body section, paste the Intercom script you copied in Step 3. Ensure that the script is placed after your button code but before the closing tag.
Add Interaction: Select your button element, go to the Interactions tab in the right sidebar, and click on the + New Interaction button.
Choose Trigger: In the Trigger section, click on the Start an animation dropdown and choose a trigger that suits your needs. For example, you can select Hover, Click, or Page Load depending on when you want the Intercom launcher to appear.
Add Action: In the Action section, click on the + Add Action button and choose Run JavaScript.
Write JavaScript code: In the empty code field, write the JavaScript code to open the Intercom launcher. Use the following code:
```javascript
Intercom('show');
```Test and Publish: Preview your Webflow project to test the Intercom launcher integration. Verify that when you interact with the designated button, the launcher pops up without hiding the standard launcher. Ensure everything functions as desired before publishing your website.
By following these steps, you can successfully add an Intercom custom launcher to your Webflow site without making the standard launcher disappear. This allows you to have an additional button that triggers the Intercom chat, providing a seamless user experience.
Additional Questions:
- How do I customize the appearance of the Intercom launcher in Webflow?
- Can I add multiple Intercom custom launchers to different buttons on my Webflow site?
- Is it possible to integrate a different live chat platform instead of Intercom in Webflow?
