How to integrate Ampstor with Webflow

May 24, 2020

How to integrate Ampstor with Webflow

This guide will help you how to publish your favorite Web Stories to Webflow. Learn now to integrate a Web Story within a page or show it as a separate full screen page.

In this tutorial we will cover how to:

  • Setup environment on Webflow
  • How to connect your website with Ampstor
  • How to display a Web Story inside a page
  • How to display a Web Story as a single full screen page

1. Setup environment on Webflow

First, you have to go to CMS Collections and Create a new collection.

Give your collection a name, "My Web Stories", then add the required fields:

  • Name (Added by default)
  • Slug (Added by default)
  • Link filed
  • Rich text field

Important!

  • Give the Link field this Label: amp-story-link
  • Give the Rich text filed this Label: amp-story-embedded-html

Don't forget to save the collection!

2. Access to Webflow

  1. Open the Webflow Dashboard and go to Project Settings. Make sure it's the project where you created the Web Stories Collection.
  2. Navigate to Integrations
  3. Scroll down to API Access
  4. Click on "Generate new API token" button and copy the given Token

Keep this token in your copied clipboard we will use it later in Ampstor.

3. Complete integration with Ampstor

  1. Open your Web Story and click on Publish located in the upper right hand side corner.
  2. Go to Webflow tab
  3. Paste the token inside the field
  4. Click Next
  5. Select your website and press on "Import Collections"
  6. Count to 5 and click on Next! (We are working on making this integration faster)
  7. Select your Collection and click on "Sent to Webflow"

Congrats! You've just imported your first Web Story to Webflow!

coming up

Mobile ready

We use Flutter technology to develop our app. Offline editing, possible!

support

Do you have ideas or questions?

With more than 20 years of experience we can
deliver the best product design.

Say Hi!

Say hi, we would love to hear from you!

Learn more

Have questions?

For any questions you may have, we are here for you.

Learn more