title: Setting a 3rd party cookie through a widget so I can recognize the user later
body: <p>I'm trying to set a 3rd party cookie from a widget that users add to their website. The widget is on user-site.com and the hosted code is o admin-site.com. My goal is to set a cookie for them so the widget will recognize them on any website the widget is installed on. I don't want to have to use a popup and have them login through my site. I just want to set a cookie for them VIA the widget and then be able to recognize them.</p>
  
  <ul>
  <li>2 lines of code are needed to make the widget appear; 1 .js file and 1 line of html.</li>
  </ul>
  
  <p>Once the widget is added to user-site.com two text fields appear; 1 for your name and 1 for your email. You then click a button to submit. I then return a user_id for the user and attempt to set a cookie through the widget. This isn't working...</p>
  
  <h2>user-site.com needs to add 2 lines of code into their html to make the widget appear</h2>
  
  <pre><code>&lt;script src="http://example.com/widget.js" type="text/javascript" async="true"&gt;&lt;/script&gt;
  &lt;div id="widget-container" class="8AORPIY0"&gt;&lt;/div&gt;
  </code></pre>
  
  <h2>widget.js</h2>
  
  <pre><code>// Create the input fields and submit button
  var login_name = '&lt;input type="text" name="name" /&gt;';
  var login_email = '&lt;input type="email" name="email" /&gt;';
  var login_button = '&lt;input type="button" value="Login" /&gt;';
  var add_fields_to_html_snippet = login_name + login_email + login_button;
  
  $('#widget-container').html(add_fields_to_html_snippet);
  
  $.ajax({
      url : "http://example.com/widget_update.php",
      type: "GET",
      data: { name:name, email:email },
      dataType:"jsonp",
      jsonp:"mycallbackupdate",
      success:function(data) { // The server side sends back the users id which will become the value of the 3rd party cookie
  
          // This is the value *user_id returned from server side
          var value = data.user_id;
          // I'm trying to set a cookie but it doesn't work
          document.cookie = 'cookie1=' + user_id + '; expires=Fri, 3 Aug 2016 20:47:11 UTC; path=/'
  
          }           
      });
  </code></pre>
  
  <p>How can I successfully set a cookie for the user through the embedded widget? I want to be able to recognize the users from any site that uses this widget.</p>
  
  <h2>Update</h2>
  
  <p>I've also tried setting the cookie from the server side:</p>
  
  <pre><code>$_COOKIE['user_id'] = $user_id;
  $expire = time() + 60 * 60 * 24 * 365;
  setcookie('cookie1', $_COOKIE['user_id'], $expire);
  </code></pre>
  
  <p>But, I'm unable to get the value of <code>cookie1</code> from widget.js. I've tried to get the cookie value by using this:</p>
  
  <pre><code>alert(document.cookie.indexOf("cookie1")); // This doesn't return the same value I set the cookie to from the HTTP header
  </code></pre>
  
  <p>But, that doesn't return the same value that I set the cookie to in the HTTP header. How can I call the same value in widget.js?</p>