How to get before/after slider on website

Squarespace Website

Step 1: Make Sure You’re on the Right Squarespace Plan

To embed a live, interactive slider, you need to be on the Business Plan or higher.
The Personal plan does not support iframe or script embeds. If you are unsure, try to move on and see if it works

Step 2: Copy the Embed Code from the Tool

After creating your slider, you’ll receive an embed code, don’t get overwhelmed! You don’t need to know what this is doing, you will simply copy and paste this where you want it! You got this!

This code allows your slider to appear and function directly on your website.

Step 3: Add the Code to a Squarespace Page

  1. Log into your Squarespace dashboard

  2. Go to Pages, then choose the page where you want the slider to appear

  3. Click Edit

  4. Hover and click the “+” button to add a new content block

  5. Select the Embed Block

  6. Click the </> icon (to enter custom code)

  7. Paste the iframe code into the box

  8. Click Apply, then Save the page

Your slider should now appear on your site and be fully interactive.

wix Website

Step 1: Copy Your Embed Code

After creating your slider, you’ll receive an embed code, don’t get overwhelmed! You don’t need to know what this is doing, you will simply copy and paste this where you want it! You got this!

Step 2: Add It to Your Wix Site

  1. Log into your Wix dashboard

  2. Go to the Editor and open the page where you want the slider

  3. Click Add (+ icon on the left)

  4. Choose Embed → Embed a Widget

  5. Drag the Embed box onto your page

  6. Click the embed box → click Enter Code

  7. Paste your iframe code

  8. Resize the embed box if needed to fit the full slider

  9. Publish or preview your page

wordpress Website

Step 1: Copy Your Embed Code

After creating your slider, you’ll receive an embed code, don’t get overwhelmed! You don’t need to know what this is doing, you will simply copy and paste this where you want it! You got this!

Step 2: Add It to a WordPress Page or Post

If you’re using the Block Editor (Gutenberg):

  1. Go to Pages or Posts, then click Edit

  2. Click the + to add a block

  3. Search for and select the Custom HTML block

  4. Paste the iframe code

  5. Click Preview to see your slider in action

  6. Save or publish the page

If you’re using the Classic Editor:

  1. Go to the post or page where you want the slider

  2. Switch from Visual to Text (HTML) mode

  3. Paste your iframe code

  4. Save or publish