Conversation Threads

Contents

Threads

With photo

Default is a thread from a Help Scout User. Worth testing that can’t be displayed here properly: Audio attachments and forwarded threads where you can “toggle” the original conversation.

Beau Lebens

[name] added a [thread type]

Cc: helpscout.dev@gmail.com

Bcc: helpscout.dev2@gmail.com


Anyone

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.

Itaque ratione omnis natus unde, sunt quam eveniet tempore, libero autem laboriosam optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.

Customer viewed on Dec 15, 2011 @ 8:10 am

<section id="tkContent">
  <article id="thread-000000" class="thread pic" data-id="000000">
    
    <section id="tkContent">
      <article id="thread-000000" class="thread pic [modifier class]" data-id="000000">
        <section class="photo">
          <img src="http://2.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=45" width="45" alt="Beau Lebens">
        </section><!--/photo-->
        <section class="messageBodyWrap">
          <section class="message">
            <section class="threadHeader">
              <section class="threadTitle">
                <h4><strong>[name]</strong> added a [thread type]</h4>
                <section class="ccBcc">
                  <p><strong>Cc:</strong> helpscout.dev@gmail.com</p>
                  <p><strong>Bcc:</strong> helpscout.dev2@gmail.com</p>
                </section><!-- /ccBcc -->
              </section><!--/threadTitle-->
              <section class="meta">
                <time><abbr title="2014-06-13T10:11:31-04:00">Jun 13, 10:11 am</abbr></time>
                <br><p>Anyone</p>
              </section><!--/meta-->
            </section><!--/threadHeader-->
            <section class="messageBody">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.</p>
              <p>Itaque ratione omnis natus unde, sunt quam eveniet tempore, libero autem laboriosam optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.</p>
              <section class="meta">
                <p class="openTime"><i class="icon-view"></i>Customer viewed on Dec 15, 2011 @ 8:10 am</p>
              </section><!--/meta-->
            </section><!-- /messageBody -->
          </section><!-- /message -->
        </section><!-- /messageBodyWrap -->
        <section class="threadOptions">
          <div class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#"><b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
              <li><a href="javascript:void(0)" data-id="000000" class="edit">Edit</a></li>
              <li><a href="javascript:void(0)" data-id="000000" class="hide">Hide</a></li>
              <li><a href="#" title="Start a conversation with this thread">New Conversation</a></li>
            </ul>
          </div>
        </section><!--/threadOptions-->
        <section class="attachments">
          <ul>
            <i class="icon-attach"></i>
            <li>
              <a href="#" class="file fancyimg" title="View Attachment" rel="thread-000000">attachment-img.jpg</a>
            </li>
            <li>
              <a href="#" class="file fancyimg" title="View Attachment" rel="thread-000000">attachment-file.jpg</a>
            </li>
          </ul>
        </section><!-- /attachments-->
      </article><!-- /thread-->
    </section><!--/tkContent-->

  </article><!-- /thread-->
</section><!--/tkContent-->

Without photo

To remove the avatar, add the .noAvatars class to <section id="tkContent">. This modification is applicable to any thread style or type.

Beau Lebens

[name] added a [thread type]

Cc: helpscout.dev@gmail.com

Bcc: helpscout.dev2@gmail.com


Anyone

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.

Itaque ratione omnis natus unde, sunt quam eveniet tempore, libero autem laboriosam optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.

Customer viewed on Dec 15, 2011 @ 8:10 am

<section id="tkContent" class="noAvatars">
  <article id="thread-000000" class="thread" data-id="000000">
    ...
  </article><!-- /thread-->
</section><!--/tkContent-->

Thread styles

Customer

Thread from a customer

Beau Lebens

[name] added a [thread type]

Cc: helpscout.dev@gmail.com

Bcc: helpscout.dev2@gmail.com


Anyone

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.

Itaque ratione omnis natus unde, sunt quam eveniet tempore, libero autem laboriosam optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.

Customer viewed on Dec 15, 2011 @ 8:10 am

<section id="tkContent">
  <article id="thread-000000" class="thread pic customer" data-id="000000">
    ...
  </article><!-- /thread-->
</section><!--/tkContent-->

User note

Note from a Help Scout user.

Beau Lebens

[name] added a [thread type]

Cc: helpscout.dev@gmail.com

Bcc: helpscout.dev2@gmail.com


Anyone

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.

Itaque ratione omnis natus unde, sunt quam eveniet tempore, libero autem laboriosam optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.

Customer viewed on Dec 15, 2011 @ 8:10 am

<section id="tkContent">
  <article id="thread-000000" class="thread pic user note" data-id="000000">
    ...
  </article><!-- /thread-->
</section><!--/tkContent-->

User forward

Forward from a Help Scout user.

Beau Lebens

[name] added a [thread type]

Cc: helpscout.dev@gmail.com

Bcc: helpscout.dev2@gmail.com


Anyone

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.

Itaque ratione omnis natus unde, sunt quam eveniet tempore, libero autem laboriosam optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.

Customer viewed on Dec 15, 2011 @ 8:10 am

<section id="tkContent">
  <article id="thread-000000" class="thread pic user forward" data-id="000000">
    ...
  </article><!-- /thread-->
</section><!--/tkContent-->

Thread types

Phone conversations

Beau Lebens

[name] added a phone call


Anyone

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.

Itaque ratione omnis natus unde, sunt quam eveniet tempore, libero autem laboriosam optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.

Download
<section id="tkContent">
  <article id="thread-000000" class="customer thread phone note" data-id="000000">
    <span class="pin"><i class="icon-phone-sm"></i><!-- cute pin here --></span>
    ...
    <section class="audio attachments">
      <section class="playerWrap first">
        <audio id="player" preload="auto" controls>
        <source src="public/mozart.mp3">
        </audio>
        <script src="public/audio-player.js"></script>
        <script>$( function() { $( '#player' ).audioPlayer(); } );</script>
        <a class="dlLink" href="/hs-dev/file/330178e1291522d6/7/579845/362702/" title="Download grasshopper_5043496659_5_11_2012_153334199.mp3">Download</a>
      </section><!-- /playerWrap -->
    </section><!--/attachments-->
  </article><!-- /thread-->
</section><!--/tkContent-->

Chat conversations

Beau Lebens

[name] started a chat


Anyone

Visitor:

Hello I have a question

Alex:

Hi there!

Visitor:

How does this whole chat thing work?

Visitor:

You know?

<section id="tkContent">
  <article id="thread-000000" class="user thread chatType" data-id="000000">
    <span class="pin"><i class="icon-chat"></i><!-- cute pin here --></span>
    <section class="photo">
      <img src="http://2.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=45" width="45" alt="Beau Lebens">
    </section><!--/photo-->
    <section class="messageBodyWrap">
      <section class="message">
        <section class="threadHeader">
          <section class="threadTitle">
            <h4><strong>[name]</strong> started a chat</h4>
          </section><!--/threadTitle-->
          <section class="meta">
            <time><abbr title="2014-06-13T10:11:31-04:00">Jun 13, 10:11 am</abbr></time>
            <br><p>Anyone</p>
          </section><!--/meta-->
        </section><!--/threadHeader-->
        <section class="transcript">
          <table border="0" cellspacing="0" cellpadding="0">
            <tbody>
              <tr>
                <td class="cite">
                  <p>Visitor<span>:</span></p>
                </td>
                <td class="message">
                  <p>Hello I have a question</p>
                </td>
              </tr>
              <tr>
                <td class="cite">
                  <p>Alex<span>:</span></p>
                </td>
                <td class="message">
                  <p>Hi there!</p>
                </td>
              </tr>
              <tr class="multi first">
                <td class="cite">
                  <p>Visitor<span>:</span></p>
                </td>
                <td class="message">
                  <p>How does this whole chat thing work?</p>
                </td>
              </tr>
              <tr class="multi last">
                <td class="cite">
                  <p>Visitor<span>:</span></p>
                </td>
                <td class="message">
                  <p>You know?</p>
                </td>
              </tr>
            </tbody>
          </table>
        </section>
      </section><!-- /message -->
    </section><!-- /messageBodyWrap -->
    <section class="threadOptions">
      <div class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          <li><a href="javascript:void(0)" data-id="000000" class="edit">Edit</a></li>
          <li><a href="javascript:void(0)" data-id="000000" class="hide">Hide</a></li>
          <li><a href="#" title="Start a conversation with this thread">New Conversation</a></li>
        </ul>
      </div>
    </section><!--/threadOptions-->
  </article><!-- /thread-->
</section><!--/tkContent-->

Drafts

Beau Lebens

[name] created a draft

Cc: helpscout.dev@gmail.com

Bcc: helpscout.dev2@gmail.com


Anyone

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.

Itaque ratione omnis natus unde, sunt quam eveniet tempore, libero autem laboriosam optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.

<section id="tkContent">
  <article id="thread-000000" class="user draft thread pic" data-id="000000">
    <section class="photo">
      <img src="http://2.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=45" width="45" alt="Beau Lebens">
    </section><!--/photo-->
    <section class="messageBodyWrap">
      <section class="message">
        <section class="threadHeader">
          <section class="threadTitle">
            <h4><strong>[name]</strong> created a draft</h4>
            <div class="btn-group">
              <a class="btn btn-mini" href="javascript:void(0)" onclick="view.loadThread('580156')">Edit</a>
              <a class="btn btn-mini" href="javascript:void(0)" onclick="view.confirmDiscardThread('580156', false)">Discard</a>
            </div>
            <section class="ccBcc">
              <p><strong>Cc:</strong> helpscout.dev@gmail.com</p>
              <p><strong>Bcc:</strong> helpscout.dev2@gmail.com</p>
            </section><!-- /ccBcc -->
          </section><!--/threadTitle-->
          <section class="meta">
            <time><abbr title="2014-06-13T10:11:31-04:00">Jun 13, 10:11 am</abbr></time>
            <br><p>Anyone</p>
          </section><!--/meta-->
        </section><!--/threadHeader-->
        <section class="messageBody">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.</p>
          <p>Itaque ratione omnis natus unde, sunt quam eveniet tempore, libero autem laboriosam optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.</p>
        </section><!-- /messageBody -->
      </section><!-- /message -->
    </section><!-- /messageBodyWrap -->
    <section class="threadOptions">
      <div class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          <li><a href="javascript:void(0)" data-id="000000" class="edit">Edit</a></li>
          <li><a href="javascript:void(0)" data-id="000000" class="hide">Hide</a></li>
          <li><a href="#" title="Start a conversation with this thread">New Conversation</a></li>
        </ul>
      </div>
    </section><!--/threadOptions-->
    <section class="attachments">
      <ul>
        <i class="icon-attach-2"></i>
        <li>
          <a href="#" class="file fancyimg" title="View Attachment" rel="thread-000000">attachment-img.jpg</a>
        </li>
        <li>
          <a href="#" class="file fancyimg" title="View Attachment" rel="thread-000000">attachment-file.jpg</a>
        </li>
      </ul>
    </section><!-- /attachments-->
  </article><!-- /thread-->
</section><!--/tkContent-->

Traffic Cop

Beau Lebens

Traffic Cop stopped your message

[name] sent a reply

Cc: helpscout.dev@gmail.com

Bcc: helpscout.dev2@gmail.com


Anyone

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.

Itaque ratione omnis natus unde, sunt quam eveniet tempore, libero autem laboriosam optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.

<section id="tkContent">
  <article id="thread-000000" class="tcop thread pic" data-id="000000">
    <section class="photo">
      <img src="http://2.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=45" width="45" alt="Beau Lebens">
    </section><!--/photo-->
    <hgroup>
    <h3>Traffic Cop stopped your message</h3>
    <div class="btn-group">
      <a href="/hs-dev/conversation/send/376343/580409/" class="btn btn-mini">Send</a>
      <a href="javascript:void(0)" class="btn btn-mini" onclick="view.loadThread('580409')">Edit</a>
      <a href="javascript:void(0)" class="btn btn-mini" onclick="view.confirmDiscardThread('580409',true)">Discard</a>
    </div><!--/btn-group-->
    </hgroup>
    <section class="messageBodyWrap">
      <section class="message">
        <section class="threadHeader">
          <section class="threadTitle">
            <h4><strong>[name]</strong> sent a reply</h4>
            <section class="ccBcc">
              <p><strong>Cc:</strong> helpscout.dev@gmail.com</p>
              <p><strong>Bcc:</strong> helpscout.dev2@gmail.com</p>
            </section><!-- /ccBcc -->
          </section><!--/threadTitle-->
          <section class="meta">
            <time><abbr title="2014-06-13T10:11:31-04:00">Jun 13, 10:11 am</abbr></time>
            <br><p>Anyone</p>
          </section><!--/meta-->
        </section><!--/threadHeader-->
        <section class="messageBody">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.</p>
          <p>Itaque ratione omnis natus unde, sunt quam eveniet tempore, libero autem laboriosam optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit beatae tempora magnam distinctio, ratione ea qui libero.</p>
        </section><!-- /messageBody -->
      </section><!-- /message -->
    </section><!-- /messageBodyWrap -->
    <section class="attachments">
      <ul>
        <i class="icon-attach"></i>
        <li>
          <a href="#" class="file fancyimg" title="View Attachment" rel="thread-000000">attachment-img.jpg</a>
        </li>
        <li>
          <a href="#" class="file fancyimg" title="View Attachment" rel="thread-000000">attachment-file.jpg</a>
        </li>
      </ul>
    </section><!-- /attachments-->
  </article><!-- /thread-->
</section><!--/tkContent-->

Single line items

you marked as Pending

<section id="tkContent">
  <article class="singleLine">
    <section class="threadHeader">
      <section class="threadTitle">
        <h4><strong>you</strong> marked as <strong>Pending</strong></h4>
      </section><!--/threadTitle-->
      <section class="meta">
        <time><abbr title="2013-09-25T16:23:16-04:00">Sep 25, '13, 4:23 pm</abbr></time>
      </section><!--/meta-->
    </section><!--/threadHeader-->
  </article>
</section><!--/tkContent-->