Show Menu
TOPICS×

Create an App

To add an App to your site, you must first create an App in Livefyre Studio.
To create a new App:
  1. Click
    +New App
    from the Apps page, and select an App type from the pulldown menu.
  2. The
    New App
    dialog box appears. Enter an
    App Title
    , select a
    Site
    , and click
    Create
    to 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 the
    Settings
    tab to override the Network and Site Settings for the App.

Apps List

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.

App Customization

You can use the App Designer tab to select
Style
and
Configuration
options to customize your Apps.
Style
Options are consistent across all App types;
Configuration
Options vary by App. The bottom of the
Style
and
Configuration
pane lists the Livefyre App version for your App.
Select Style Options
Style Apps to fit your site’s branding. Use the
Style
options to select the App’s color and font styles.
  • Theme
    . Select
    Light
    or
    Dark
    to 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.

Updating Apps

If a newer version of the App exists, an
Update
button displays.
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:
  1. Create a Mosaic or Media Wall App.
    For information on the customizations available in a Mosaic or Media wall, see Mosaic Customizations or Media Wall Customizations .
  2. Open the Designer for the App.
  3. Scroll to the
    Call-to-Action Button
    section in the Designer.
  4. Switch
    Call-to-Action Button
    to
    on
    .
  5. Configure the Call-to-Action button options.

App Previews

App Designer allows you to preview your App in multiple delivery formats, and with your own or sample data displayed.
Select
Exit Preview
to 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 show
    Sample Data
    or 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 clicking
    Publish
    .
  • 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 mind
button and post content to your test version. Studio lists content as posted.

App Publishing

App Designer automatically saves your App after you make a change. You can use
Publish
to generate an embed code, or to update any previously published versions of this App with the current version.
Clicking
Publish
generates 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
History
to open a panel listing all versions of your App. Listed versions will show each version’s editor and its age.
To review App history:
  1. Click on a version to select it.
  2. Refresh the preview display.
  3. Click
    Restore Version
    to clone the selected version and work from it.
  4. Click the back button in
    Version History
    to revert to your working draft.
  5. Click
    Share
    to generate a URL for the preview.
You can not edit an App while the
Version History
pane 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 Latest
to begin working from the latest version. Click
Overwrite
to 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:
  1. From the App Overview screen, click the
    </> Embed Code
    button.
  2. From the
    Embed Code
    panel 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:
  1. Click
    Apps
    .
  2. Click on the ellipsis to the right of the name of the App to delete.
  3. Click
    Delete App
    to delete the App.