Text2MySite™

Webflow Integration

Add Text2MySite™ SMS alerts to your Webflow website

Setup time: 3-5 minutes

Webflow provides robust and flexible options for embedding code, making it a powerful tool for designers and developers alike. You have a choice between adding code to a specific page element or injecting it site-wide.

1
The Embed Element (For On-Page Widgets)
The most common and straightforward method for adding a widget to a specific page
Recommended for specific pages

This is the most common and straightforward method for adding a widget to a specific page or section of your design.

Step-by-Step Instructions:

  1. In the Webflow Designer, click the Add Elements panel (the plus icon +).
  2. Scroll down to the Components section and find the Embed element.
  3. Drag and drop the Embed element onto the canvas where you want your widget to appear.
  4. A pop-up window will appear with a code editor. Paste your widget's HTML, CSS (wrapped in <style> tags), and JavaScript (wrapped in <script> tags) into this editor.
  5. Click Save & Close.

Important:

For security reasons, the widget will typically not display in the Webflow Designer. You will only see a placeholder that says "Custom Code." To see the live widget, you must click Publish in the top-right corner and view your live site.

2
Custom Code in Site Settings (For Site-Wide Scripts)
For adding scripts that need to be on every page of your site
For sitewide scripts

This method is for adding scripts that need to be on every page of your site, such as analytics trackers, a chatbot, or a global pop-up.

Step-by-Step Instructions:

  1. From the Webflow Designer, click the Project Settings icon (the gear icon) in the top-left menu.
  2. Navigate to the Custom Code tab.
  3. You will see two sections: Head Code and Footer Code.
    • Head Code: Place code here that needs to load early, like for Google Analytics or other scripts that require a quick page load.
    • Footer Code: This section is for scripts that can run after the main content of your page has loaded. This is the best place for most widgets like live chats to avoid slowing down your site's initial load time.
  4. Paste your script into the appropriate section and click Save Changes.
  5. Click Publish to deploy the code to your live site.
YouTube Tutorials
Watch step-by-step video guides for embedding code in Webflow

How to Embed Code in Webflow (Easily)

Quick and clear overview of using the embed element and sitewide custom code

From the Webflow channel

Watch Tutorial

How to Add Custom Code in Webflow – JavaScript, CSS & More!

In-depth guide covering different scenarios for adding custom code

From the Derek Sue channel

Watch Tutorial