Create an App
To add an App to your site, you must first create an App in Livefyre Studio.
To create a new App:
- Click+New Appfrom the Apps page, and select an App type from the pulldown menu.
- TheNew Appdialog box appears. Enter anApp Title, select aSite, and clickCreateto open the App Overview page.
The App Summary page provides 4 tabs:
- App Summary: provides an overview of the App’s content and status, and provides tools to access the App on its site and generate its embed code.
- Designer: allows you to select design options for the App, including fonts, color schemes, and App specific configuration options.
- Streams: lists all Stream sources for the App’s content. Click the Stream’s title to open the Stream Details page, from which it may be edited.
- Settings: allows you to select App specific settings, including rules for adding content to the App, and the types of content to display. Click theSettingstab to override the Network and Site Settings for the App.
The Apps list page provides access to all of your existing Livefyre Apps.
The Apps list page displays the following information:
- Title: Lists your App’s title, and includes an icon indicating the App type.
- Site: Lists the App’s location, by site.
- Content Count: Lists the number of pieces of content published to the App.
- Date Modified: Lists the last time the App was changed in App Designer.
- Embed Code (</>): Click the icon to generate the embed code for your App.
You can use the App Designer tab to select
Configurationoptions to customize your Apps.
StyleOptions are consistent across all App types;
ConfigurationOptions vary by App. The bottom of the
Configurationpane lists the Livefyre App version for your App.
Select Style Options
Style Apps to fit your site’s branding. Use the
Styleoptions to select the App’s color and font styles.
- Theme. SelectLightorDarkto define the background color for your displayed content. Changes made to this setting will be immediately reflected in the preview to the right. This setting controls background, content text, user handle, timestamp, share button, and social icon color selection for the App.
- Brand color. Select a color for your App. This color will be used for hashtags, URLs, usernames, @mentions, bar charts, and other App-specific components, as displayed in the preview pane to the right.
- Font family. Select a font for user generated content in your App. Selecting Georgia or Times New Roman will assign that font to content, and Helvetica Neue to usernames and display names. Selecting Helvetica, Verdana, or Trebuchet will assign those fonts to content, usernames, and display names.
- Font size. Select a default font size. This setting will affect all user generated content and titles displayed in the App.
If a newer version of the App exists, an
Click the button to update to the newest release version. Refresh your App to use all available feature enhancements and bug fixes. Once updated, preview changes made to your App (if any), then accept or reject the update.
Add a Call-to-action Button to an App
Add a Call-to-action button to drive conversion from UGC.
To add a Call-to-action button to an App:
- Open the Designer for the App.
- Scroll to theCall-to-Action Buttonsection in the Designer.
- SwitchCall-to-Action Buttontoon.
- Configure the Call-to-Action button options.
App Designer allows you to preview your App in multiple delivery formats, and with your own or sample data displayed.
Exit Previewto return to design mode.
Preview Mode offers the following options:
- Preview Options: Use the pulldown menu to select a preview format (mobile, tablet, or desktop) and whether to showSample Dataor the App’s Stream data.
If you deselect
Sample Data, and no Stream is enabled for the App, no content displays in Preview Mode.
- Share: Opens the App in a new browser tab, and generates a URL, which may be used to allow friends, colleagues, or non-Studio users to review your App, and test it in different browsers and devices.Any content posted to a review version of your App will be added to the App. If you do not wish this content to appear in your published App, you must delete it before clickingPublish.
- Exit Preview: Returns you to edit mode.
Preview mode is fully interactive, allowing you to test the user experience for your App. If you enable
Allow user posts, users with the preview link can click the
What’s on your mindbutton and post content to your test version. Studio lists content as posted.
App Designer automatically saves your App after you make a change. You can use
Publishto generate an embed code, or to update any previously published versions of this App with the current version.
Publishgenerates an embed code for the App, and updates all existing instances of the App if previously published.
Review App History
App Designer automatically saves your App after you make a change and generates a new version for each change. You can use
Historyto open a panel listing all versions of your App. Listed versions will show each version’s editor and its age.
To review App history:
- Click on a version to select it.
- Refresh the preview display.
- ClickRestore Versionto clone the selected version and work from it.
- Click the back button inVersion Historyto revert to your working draft.
- ClickShareto generate a URL for the preview.
You can not edit an App while the
Version Historypane is open.
If another editor makes changes while your browser window is open, Livefyre issues a warning message when you try to edit the App, asking if you wish to return to your (older) draft version. (This prevents multiple simultaneous editors from accidentally ignoring each other’s changes.) Click
Update to Latestto begin working from the latest version. Click
Overwriteto return to your (older) working state, increment the version number from the most recent, and continue working.
App Summary Tab
Use the App Summary tab to manage information for individual Apps.
The App Summary tab allows you to:
- See on Site: Opens the App on your site.
- Embed code: Available only for published Apps, provides a clickable link to generate the embed code for any published App.Use this embed code to add Polls to your Comments or Live Blog App. For more information, see Custom Interactions > Custom HTML.
- View Content: Opens the Content page, which lists all content published to your App.
- Moderate: Opens ModQ, listing all content awaiting moderation for the App.
- Developer Info: Provides the App’s Collection ID, Article ID, and Site ID.
Embed an App on your Site Using Studio
Generate the Embed Code.
When an App is published, Livefyre generates and displays an embed code, which may be used to embed the App on any page in your Network. To regenerate the HTML snippet used to embed your App on a page:
- From the App Overview screen, click the</> Embed Codebutton.
- From theEmbed Codepanel that opens, copy and paste the HTML code snippet displayed into your web page.For Apps requiring user authentication, your integration for user auth must be complete and located on the page before adding the embed code.
Delete an App
You can delete an App from the Apps list in Livefyre Studio. When you delete the App from Studio, the App is hidden from view, it does not delete or stop:
- The App from continuing to work on a site.
- Associated streams.
- Associated collections in Livefyre.
To delete an App:
- Click on the ellipsis to the right of the name of the App to delete.
- ClickDelete Appto delete the App.