Self-Embed Widgets

Self-embed widgets is a new option that enables you to create and configure widget codes directly in your Sawyer account portal. With this update, you'll no longer need to reach out to our Support team to create or edit these embed codes on your behalf...you'll now have all the power! 

This project is being released in three phases, so over the course of the next couple of months you will see these exciting updates in your portal.

How to Access Self-Embed Widgets

My Account

• Widget Embeds will appear as an option in the My Account dropdown
• Owners and Admin users will be able to view Widget Embeds

• If you have no embeds, you will see an onboarding screen below:

• If you have previously created embeds, you will see the embed name(s) listed
• Please note: The names of the embed codes were either originally set by a Sawyer team member or were assigned a numerical number. If they were given a number, it will say “Widget Embed #[X]”

• Updated On: This field displays the date that the widget was last saved (using the Save button) by Sawyer
• Label: Embeds that are hidden (inactive) will display with a hidden label. Hidden embeds will not display on your site when the code is embedded, but they can be changed to active.

• Get code: You can click the </> icon to see your embed code
  • On this page, you can choose to copy your embed code using the Copy button. The code can then be pasted into your website editor 
  • You can also preview the widget by using the Live link button in your account. This goes to the URL that is generated based on your settings, and is the same URL as the Live Link icon on the widget embed page
• Default Sort order: Most recently updated at the top, least recently updated at the bottom
  • • Choose sort order: 
      You can choose a sort order for this page!
      • Options are Most Recent (default), Oldest First, Name (A - Z), Name (Z-A)
      • Name (A - Z) matches the listing tab which is 1. Symbols 2. Emojis 3. Numbers 4. Letters
      • If you change the sort order and then edit or create a widget, the sort order will refresh upon save
• Search: There’s no true search option, but you can use cmd+f on your keyboard to search for matching text on the page, like the embed name

• Live Link:
  • This opens a new tab in your browser which uses the URL generated based on the settings of your embed
  • This URL is sharable and can be used to embed on a website that uses a URL, like Wix or Google Sites
  • The URL is always active, even if the embed is set to hidden 

Additional Widget Actions: Deleting & Downloading

From the self-embed widget page, you'll also see icons for Deleting and Downloading embed codes.

• Deleting your embed:
  • You can click the trashcan icon to delete your embed 
  • Next, you will be asked to confirm your decision
  • When you delete the code, it will no longer render on your website and it cannot be restored 

• Downloading your embeds:
  • You can download your embeds into a .csv file
  • This is an instant download to your device
  • What it displays: 
    • Embed Name, Default Tab, Display Type, Widget Tags, Locations, Override URL, Notes, Status, Embed Code, URL, Created Date, Last Updated

How to Create New Widget Embeds

• Navigate to the top right profile button and click on Widget Embeds.
• Click on New Embed. A new page will appear where you will fill out the following information: Widget Name, Default Tab, Default View, Widget Tags, Filter by Location and Notes:

• Widget Name
  • • This is a required field and it is how you will be able to identify your embed moving forward. It should be named something identifiable so when you see it in the list later, you know which embed it is (which page it is on on your website, what season it’s for, what kind of offerings, etc)
• Default Tab
  
  • • This is the first tab customers will see when they view the embed
      
• Default View
  • • You can chose the List view or Calendar. This is the widget view customers will see by default
• Widget Tags
  • • This will list all of your existing widget tags that have been created for your account. You can type in the box to search for a tag.
    • You can select multiple tags
    • If you don't have any widget tags, the dropdown will just say “No widget tags created”. Please note: You cannot create a widget tag here. You will still need to create them in the schedule building flow and then they will appear here. Learn more about Widget Tags here.

• Filter by Location
  • • You can search for a location in the drop down and select multiple. Any location created  will display, including active and inactive.
    • The default state is that all locations will display on the widget. You should only use this field if you want to filter and show classes at a specific location, and not show classes that happen at other locations
    • You cannot create a location here. You will still need to create them in the schedule building flow
      • Blank scenarios:
        If there are no locations created, it will say “No locations created”
        If the location has no address, it will say “No address provided”
        If there is no location name, name displays as “Location name unavailable"
• Notes
  • • This is an internal only field
    • It can be used to note where the widget goes on your site, what season it is for, or when you need to remove or update it, for example.
• Active
  • • This setting allows you to control if the code will appear on your site or not
    • If the embed is set to “active”, when you add the code to your website (and save/publish your site), it should appear on your website to users
    • If the embed is set to “hidden”, when you add the code to your website, it will not appear on the live site to users
    • As soon as you switch it to active, it will go live on your site and vice versa
    • When widget is hidden, a label will display on the list view for easy reference

• • • When the new widget is saved, you will be shown the Get Code modal so you can easily access the code you've just created! You can also access the “preview” link
    • A confirmation message will display to let you know the widget saved
    • Please note: widgets are sorted with most recently updated at the top of the list, so when they create/edit a widget and save, it will go to the top of the list on the widget embed page

• If you're looking to default your widget to a specific schedule, activity page or filter, URL Override can help you accomplish this.

How to Edit an Embed 

• • Click on the pencil icon next to the widget embed you'd like to edit. This will take you to the embed detail page
  • At the bottom of the page you will see a warning in yellow:
•  
•