University Catalog Widget

The University Catalog now includes an API widget that allows you to add a link or a list of links, or pull content from the catalog and display it on your website. The widget keeps your links and information up-to-date by always pulling the latest information from the catalog. This means that when the catalog is updated, the links and content on your website are also updated. To use the widget, perform the following two steps.

Step One - Request the Code

Complete the following steps to request the HTML code from the eCatalog Webmaster.

  1. Visit the University Catalog website and locate the content that you want to add to your website.
  2. Send an email with the subject "API Access" to the eCatalog Webmaster and include a link to the catalog page that you want to access. If the catalog page contains multiple sections of content and you only want access to a specific section, provide the heading of that section in the email. Also, indicate whether you want to link to the content or pull the content onto your website.

    Note: Once your request is processed, the eCatalog Webmaster will reply with HTML code that you will need for step two.

Step Two - Add the Code

Once you receive the HTML code from the eCatalog Webmaster, you can add a link or pull content from the University Catalog by completing the following steps.

  1. Edit the webpage where you want to add the catalog link or content.
  2. Below the WYSIWYG editor, select Full HTML with Scripts from the Text format drop-down list.
  3. On the WYSIWYG editor toolbar, click the Source button to switch to code view.
  4. Insert the following line as the first line of code in your source code.
    <link rel="stylesheet" href="http://ecatalog.calstatela.edu/widget-api/widget-api.min.css">
  5. Insert the following lines as the last lines of code in your source code.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://ecatalog.calstatela.edu/widget-api/widget-api.min.js"></script>
    <script>
    $(function() {
    $('.acalog').acalogWidgetize({
    gateway: 'http://ecatalog.calstatela.edu'
    });
    });
    </script>
  6. Locate the position where you want the catalog link or content to appear and paste the HTML code you received from the eCatalog Webmaster.

    Note: If you are not familiar with HTML or are not sure where to paste the HTML code, you can do the following. Switch back to rendered view by clicking the Source button and type multiple consecutive X's in the location that you want to add the catalog code. Then switch back to code view, locate the X's, and replace them with the catalog HTML code.

Place curser where you want catalog content or link to appear, type multiple X characters, switch to code view, locate the X characters and replace them with the HTML code you got from the eCatalog Webmaster

  1. Save and publish your webpage. You should now see the catalog link or content on your page.