SureFeedback

https://surefeedback.com/docs/
Admin
SureFeedback is a collaborative feedback platform for collecting comments and annotations on...
Tokens:32,899
Snippets:570
Trust Score:9.1
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install SureFeedback Sketch Plugin

Source: https://surefeedback.com/docs/syncing-sketch-with-surefeedback

Download the latest release of the plugin from GitHub, unzip the file, and double-click the .sketchplugin to install.

```text
To install: download this file, unzip and double click on the .sketchplugin
```

--------------------------------

### Integromat Integration Setup

Source: https://surefeedback.com/docs/file-uploads-setup

Steps to integrate SureFeedback with Integromat using the REST API and JSON Basic Auth plugin. This involves installing a WordPress plugin, importing a blueprint into Integromat, and configuring HTTP module credentials.

```text
1. Visit github.com/WP-API/Basic-Auth and download the  _JSON Basic Authentication_ plugin (direct link)
2. Install and activate the plugin zip file via your SureFeedback dashboard site’s wp-admin, under **Plugins > Add New > Upload**.
3. On your Integromat dashboard click  _Create A New Scenario_ , then click  _Skip_ :
4. Click the “More” button, and click “Import Blueprint”.
Upload one of these blueprints to get started!
Blueprints
New Mockup Tasks Blueprint
New Website Tasks Blueprint
5. In the **HTTP Module** , update yoursite.com to your own site URL (make sure www vs not www is correct!)
6. Click “Add” next to the “Credentials” box and add your username and password.
7. Add a new mockup task or website task on your site for testing.
8. Click “Run Once” on integromat and ignore any warnings.
9. Connect your service to the iterator module, create your action and map the fields to your service!
```

--------------------------------

### Project Shortcode with Options

Source: https://surefeedback.com/docs/adding-a-project-shortcode-to-your-site-3-1-x-and-lower

Customize the display of the project shortcode by adding options like 'titles' and 'columns'. This example shows a 2-column grid with titles.

```shortcode
[project_huddle id="12" titles="true" columns="2"]
```

--------------------------------

### Direct Link to a SureFeedback Project

Source: https://surefeedback.com/docs/dashboard-shortcode

This is an example of a direct link to a specific project within the SureFeedback dashboard. This link can be shared to allow access to the project while retaining dashboard features.

```plaintext
https://projects.mysite.com/dashboard/#/mockup/5652
```

--------------------------------

### Install Code Snippet for Non-WordPress Sites

Source: https://surefeedback.com/docs/adding-a-clients-non-wordpress-site

This JavaScript code snippet should be pasted directly before the closing </body> tag of your client's non-WordPress website to integrate SureFeedback.

```javascript
<script src="https://cdn.surefeedback.com/widget.js" defer></script>
<script>
  window.surefeedback = {
    siteId: "YOUR_SITE_ID",
    siteUrl: "YOUR_SITE_URL",
    siteTitle: "YOUR_SITE_TITLE",
    siteType: "Something Else"
  };
</script>
```

--------------------------------

### Dashboard Shortcode with Options

Source: https://surefeedback.com/docs/dashboard-shortcode

Customize the dashboard shortcode to display specific project types and control the layout. This example shows how to display only mockup projects in a two-column grid.

```shortcode
[ph_dashboard activity=false websites=false per_page=12 columns=2]
```

--------------------------------

### Extend WebsitePage View with Custom Functionality

Source: https://surefeedback.com/docs/extending-backbone-models-views-and-collections

Extend the original WebsitePage view to add custom functions and subviews. This example uses a custom prefix to avoid naming conflicts.

```javascript
/**
 * Extend the original image view
 * Here we can add our own functions, events, whatever we like.
 */
ph.api.views.WebsitePage = ph.api.views.WebsitePage.extend({
     initialize: function () {
          this.constructor.__super__.initialize.apply(this, arguments);
          this.prefixOurFunction();
     },
    // add a subview
    prefixOurFunction: function () {
        this.views.set( '.ph-annotation-dot-container', new prefix.OurNewView( {
            model: this.model
        } ) );
    }
});

```

--------------------------------

### Extend ImageView Prototype with Custom Functionality

Source: https://surefeedback.com/docs/extending-backbone-models-views-and-collections

Extend the original ImageView prototype to add custom functions and subviews. This example demonstrates adding a new subview using a custom prefix.

```javascript
/**
 * Extend the original image view
 * Here we can add our own functions, events, whatever we like.
 */
Huddle.ImageView.prototype = Huddle.ImageView.prototype.extend({
    initialize: function () {
          this.constructor.__super__.initialize.apply(this, arguments);
          this.prefixOurFunction();
     },
    // add a subview
    prefixOurFunction: function () {
        this.views.set( '.ph-annotation-dot-container', new prefix.OurNewView( {
            model: this.model
        } ) );
    }
});

```

--------------------------------

### Sync Project and Artboards from Sketch

Source: https://surefeedback.com/docs/syncing-sketch-with-surefeedback

Navigate to Plugins > SureFeedback > Sync... in Sketch. Select mockup projects from your site and choose specific artboards to sync. The sync process will begin with a progress bar.

```text
Plugins > SureFeedback > Sync…
```

--------------------------------

### Set memory_limit in .htaccess

Source: https://surefeedback.com/docs/increasing-the-wordpress-memory-limit

If you cannot access php.ini, add this directive to your .htaccess file to increase the memory limit for your WordPress installation.

```apache
php_value memory_limit 96M
```

--------------------------------

### Project Shortcode with Custom Options

Source: https://surefeedback.com/docs/project-shortcode

Customize the display of a mockup project by specifying the number of items per page and the number of columns.

```shortcode
[ph_project id=4  per_page=12 columns=2]
```

--------------------------------

### Exclude Caching for Cookies

Source: https://surefeedback.com/docs/exclude-caching

Exclude cookies starting with 'ph' and the '_wp_session' cookie from caching. This ensures proper session management and prevents issues with dynamic content.

```regex
(^|;\s*)ph_apikey (^|;\s*)access_token
```

```regex
(^|;\s*)ph _wp_session
```

--------------------------------

### Check Nginx Configuration Syntax

Source: https://surefeedback.com/docs/gridpane-compatibility

Run this command to verify that the Nginx configuration files have correct syntax before reloading.

```bash
nginx -t
```

--------------------------------

### Create Nginx HTTP Verbs Root Context Configuration

Source: https://surefeedback.com/docs/gridpane-compatibility

Use this command to create and open the Nginx configuration file for defining HTTP verbs at the root context.

```bash
nano /var/www/example.com/nginx/http-verbs-root-context.conf
```

--------------------------------

### Extend Mockup ImageView Initialize and Ready Functions

Source: https://surefeedback.com/docs/extending-backbone-models-views-and-collections

Extend the ImageView in the Mockups module by hooking into its initialize and ready methods. This allows for custom code execution upon view construction and DOM readiness.

```javascript
Huddle.ImageView = Huddle.ImageView.extend({
     initialize: function () {
          this.constructor.__super__.initialize.apply(this, arguments);
          // add your code here
          console.log('constructed');
     },
     ready: function(){
          this.constructor.__super__.ready.apply(this, arguments);
          // add your code here
          console.log('dom is ready');
    }
});
```

--------------------------------

### Generate API Secret Key in WordPress

Source: https://surefeedback.com/docs/syncing-sketch-with-surefeedback

Log in to your WordPress installation, navigate to Users > Your Profile, and generate an API Secret Key for Sketch integration. Ensure you copy the generated secret.

```text
Type in “Sketch” for the description, then click “Add New”, then copy the “API Secret Password”.
```

--------------------------------

### Welcome Message in Mockups Extension

Source: https://surefeedback.com/docs/file-uploads-setup

Allows customization of the welcome message displayed in mockups. This snippet indicates where to implement custom welcome messages.

```javascript
// Welcome Message In Mockups
```

--------------------------------

### Extend Website View Initialize and Ready Functions

Source: https://surefeedback.com/docs/extending-backbone-models-views-and-collections

Hook into the initialize and ready methods of the WebsitePage view to add custom logic. Use this to extend functionality when the view is constructed or when the DOM is ready.

```javascript
ph.api.views.WebsitePage = ph.api.views.WebsitePage.extend({
     initialize: function () {
          this.constructor.__super__.initialize.apply(this, arguments);
          // add your code here
          console.log('constructed');
     },
     ready: function(){
          this.constructor.__super__.ready.apply(this, arguments);
          // add your code here
          console.log('dom is ready');
    }
});
```

--------------------------------

### Add Custom Settings to Extensions Page

Source: https://surefeedback.com/docs/add-settings-to-extensions-page

Use the 'ph_settings_extensions' filter to add new fields to the SureFeedback extensions settings page. This example shows how to add a divider, a text box, a color picker, and a checkbox.

```php
<?php
// filter plugin settings 
add_filter( 'ph_settings_extensions', 'my_extension_plugin_settings' );

// add our settings
function my_extension_plugin_settings($settings) {
	// add fields

	// divider with title
	$settings['fields'][] = array(
		'id'          => 'highlight_divider',
		'label'       => __( 'JIRA Integration', 'my-text-domain' ),
		'description' => '',
		'type'        => 'divider',
	);

	// see all field types in includes/admin/settings/settings-fields.php
    
    // text box example
	$settings['fields'][] = array(
		'id'          => 'my_extension_text_box',
		'label'       => __( 'A Text Box', 'my-text-domain' ),
		'description' => __( 'This is a description for a text box.', 'my-text-domain' ),
		'type'        => 'text',
		'default'     => '',
		'placeholder' => __( 'Enter some text.', 'my-text-domain' ),
	);
    
    // color picker	
    $settings['fields'][] = array(
	    'id'          => 'my_extension_color',
        'label'       => __( 'Color Picker Example', 'project-huddle' ),
        'description' => __( 'Color picker description.', 'project-huddle' ),
        'type'        => 'color',
        'default'     => '#23282d'
    ),
	
    // checkbox example
	$settings['fields'][] = array(
		'id'          => 'my_extension_checkbox',
        'label'       => __( 'Checkbox Example', 'project-huddle' ),
        'description' => __( 'Checkbox description.', 'project-huddle' ),
        'type'        => 'checkbox',
        'default'     => 'on', // on by default
	);

	return $settings;
}


/**
 * Get our options
 */
$text_box = get_option('ph_my_extension_text_box');
$color    = get_option('ph_my_extension_color');
$checkbox = get_option('ph_my_extension_checkbox');

```

--------------------------------

### Basic Project Shortcode Usage

Source: https://surefeedback.com/docs/project-shortcode

Use the `ph_project` shortcode with the `id` parameter to display a specific project on your site.

```shortcode
[ph_project id=5670]
```

--------------------------------

### Varnish Configuration Rules for SureFeedback

Source: https://surefeedback.com/docs/varnish-caching

Add these rules to your Varnish configuration file to prevent SureFeedback pages from being incorrectly cached or hidden. These rules ensure that URLs containing 'ph_apikey' or 'access_token' are passed through directly.

```Varnish
if (req.url ~ "ph_apikey") { return (pass); }

if (req.url ~ "access_token") { return (pass); }
```

--------------------------------

### Remove Theme Wrapper for Custom Post Types

Source: https://surefeedback.com/docs/known-issues

This function removes a theme's custom content wrapping for specific post types, preventing header and footer duplication on SureFeedback pages. This is a general example and may need adjustment for different themes.

```php
function ph_remove_theme_template_redirect($single_template) {
	global $post;

	if ($post->post_type == 'ph-project') {
		remove_filter( 'template_include', array( 'Theme_Wrapping_Class', 'wrap' ), 99 );
	}
	return $single_template;
}
add_filter( 'single_template', 'ph_remove_theme_template_redirect' );
```

--------------------------------

### Extend Backbone View Events for Websites

Source: https://surefeedback.com/docs/listening-for-javscript-events

Extend the events hash of a Backbone.js view to include custom event listeners. This example shows how to add a 'hover' event listener to elements with the class '.ph-annotation-dot' and associate it with the 'prefixDoSomething' method. It's recommended to use Backbone events for automatic cleanup.

```javascript
ph.api.views.Comment = ph.api.views.Comment.extend({
     // Add new events
     events: function () {
          // we're extending the original events here with our own
          return _.extend({}, this.constructor.__super__.events, {
               'hover .ph-annotation-dot': 'prefixDoSomething'
          });
     },

     // add our own method
     prefixDoSomething: function () {
          console.log('hovered!');
     }
});
```

--------------------------------

### Connect Sketch Plugin to SureFeedback Site

Source: https://surefeedback.com/docs/syncing-sketch-with-surefeedback

In Sketch, navigate to Plugins > SureFeedback > Connection Settings. Enter your site URL, API Key, and the API Secret Key obtained from your WordPress profile. The site URL must be exact, including or excluding https and/or www.

```text
site url
```

```text
API Key
```

```text
API Secret
```

--------------------------------

### Send Email on New Website Thread Publication

Source: https://surefeedback.com/docs/ph_website_publish_thread

This PHP function hooks into the 'ph_website_publish_thread' action to send an email notification to the admin when a new conversation thread is started on a website. It retrieves the thread URL, constructs a subject and message including the webpage title, and uses wp_mail() to send the email.

```php
<?php
function my_project_created_send_email( $post_id, $thread) {
	$thread_url = get_permalink( $post_id );
	$subject = 'A new conversation has been started.';

        // get webpage id (parent_id)
	$webpage_id = get_post_meta( $post_id, 'parent_id', true);

	$message = " A new conversation has been started on "  . get_the_title($webpage_id) . ". \n\n";
	$message .="View it" . $post_url;

	// Send email to admin.
	wp_mail( 'admin@example.com', $subject, $message );
}
add_action( 'ph_website_publish_thread', 'my_project_created_send_email', 10, 3 );
?>
```

--------------------------------

### Display Subscribed Projects in Gallery Format

Source: https://surefeedback.com/docs/adding-a-subscribed-projects-shortcode-3-1-x-and-lower

Use this shortcode to display subscribed projects in a gallery format, including titles and approval names. This is useful for visually organizing project information.

```shortcode
[ph_subscribed_projects format=gallery titles=true approved_by=true]
```

--------------------------------

### Open Nginx Headers HTTP Context Configuration

Source: https://surefeedback.com/docs/gridpane-compatibility

Use this command to open the Nginx configuration file for managing HTTP headers and request methods.

```bash
nano /etc/nginx/extra.d/headers-http-context.conf
```

--------------------------------

### Enable HTTP Authorization Header on WPEngine

Source: https://surefeedback.com/docs/syncing-sketch-with-surefeedback

For WPEngine hosting, add this line to your .htaccess file to enable the HTTP Authorization header. This is a specific configuration for WPEngine environments.

```apache
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
```

--------------------------------

### Reload Nginx Configuration

Source: https://surefeedback.com/docs/gridpane-compatibility

Execute this command to apply the changes to the Nginx configuration after verifying the syntax.

```bash
gp ngx reload
```

--------------------------------

### Set Defaults for New Mockup Projects

Source: https://surefeedback.com/docs/change-default-mockup-project-options

Use the `ph_project_meta_box_options` filter to define default values for new mockup projects. This function iterates through options and sets defaults for access, comments, sharing, retina, download, zoom, and approval settings. Add this to your theme's functions.php file.

```php
<?php
/**
 * Set defaults for new mockup projects
 *
 * @param $options array Meta box options
 *
 * @return array Filtered options
 */
function wp_928_mockup_project_defaults( $options ) {
	foreach ( $options as $key => $option ) {
		switch ( $option['id'] ) {
			case 'project_access':
				$options[ $key ]['default'] = 'public'; // login, password or public
				break;
			case 'project_comments':
				$options[ $key ]['default'] = 'on'; // on or off
				break;
			case 'project_sharing':
				$options[ $key ]['default'] = 'on'; // on or off
				break;
			case 'retina':
				$options[ $key ]['default'] = 'on'; // on or off
				break;
			case 'project_download':
				$options[ $key ]['default'] = 'on'; // on or off
				break;
			case 'zoom':
				$options[ $key ]['default'] = 'on'; // on or off
				break;
			case 'project_approval':
				$options[ $key ]['default'] = 'on'; // on or off
				break;
			case 'project_unapproval':
				$options[ $key ]['default'] = 'on'; // on or off
				break;
		}
	}

	return $options;
}

add_action( 'ph_project_meta_box_options', 'wp_928_mockup_project_defaults' );

```

--------------------------------

### Basic Dashboard Shortcode

Source: https://surefeedback.com/docs/dashboard-shortcode

Use this shortcode to display all projects a logged-in user is subscribed to. This is useful for creating client overview pages.

```shortcode
[ph_dashboard]
```

--------------------------------

### Basic Project Shortcode

Source: https://surefeedback.com/docs/adding-a-project-shortcode-to-your-site-3-1-x-and-lower

Add this shortcode to a page or post to display project information. Replace '12' with your project's actual ID.

```shortcode
[project_huddle id="12"]
```

--------------------------------

### Add Subscribed Projects Shortcode

Source: https://surefeedback.com/docs/adding-a-subscribed-projects-shortcode-3-1-x-and-lower

Use this shortcode to display projects a logged-in user is subscribed to. The user must be logged in for any projects to display. If no projects are assigned, a 'You have not been added to any projects' message will appear.

```shortcode
[ph_subscribed_projects]
```

--------------------------------

### Define Allowed HTTP Verbs in Root Context

Source: https://surefeedback.com/docs/gridpane-compatibility

Add this line to the `http-verbs-root-context.conf` file to allow PUT and DELETE methods.

```nginx
dav_methods PUT DELETE;
```

--------------------------------

### Embed Project with Shortcode

Source: https://surefeedback.com/docs/project-shortcode

Use this shortcode to embed a specific project on a page, allowing users to view progress and comments. Replace '4' with the actual project ID.

```html
[ph_project id=4]
```

```html
[ph_project id=4]
```

--------------------------------

### Configure 6G WAF Exclusion for Bad Methods

Source: https://surefeedback.com/docs/gridpane-compatibility

Use this command to disable the 'bad-methods' exclusion in the 6G WAF for a specific site, allowing the previously configured HTTP verbs.

```bash
gp site site.url 6g -bad-methods off
```
Tokens:
Raw