/flex2html

Convert LINE Flex Message 2 HTML

Primary LanguageCSSMIT LicenseMIT

flex2html - Convert LINE Flex message to HTML

How to use

  • include CSS file
<link rel="stylesheet" href="css/flex2html.css">
  • include JS file
<script type="text/javascript" src="js/flex2html.min.js"></script>
  • create HTML layer element
<div id="flex1"></div>
  • call function
flex2html(elementId, flexJson)

Example

<html>
   <head>
      <link rel="stylesheet" href="css/flex2html.css" >
      <script type="text/javascript" src="js/flex2html.min.js"></script>
   </head>
   <body>
      
      <div class="chatbox">
         <div id="flex1"></div>
      </div>
      
      <script>
         const target_element = "chatbox"
         flex2html("flex1", {"type":"flex","altText":"Flex Message","contents":{"type":"bubble","hero":{"type":"image","url":"https://scdn.line-apps.com/n/channel_devcenter/img/fx/01_1_cafe.png","size":"full","aspectRatio":"20:13","aspectMode":"cover","action":{"type":"uri","uri":"http://linecorp.com/"}},"body":{"type":"box","layout":"vertical","contents":[{"type":"text","text":"Brown Cafe","weight":"bold","size":"xl"},{"type":"box","layout":"baseline","margin":"md","contents":[{"type":"icon","size":"sm","url":"https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"},{"type":"icon","size":"sm","url":"https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"},{"type":"icon","size":"sm","url":"https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"},{"type":"icon","size":"sm","url":"https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"},{"type":"icon","size":"sm","url":"https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gray_star_28.png"},{"type":"text","text":"4.0","size":"sm","color":"#999999","margin":"md","flex":0}]},{"type":"box","layout":"vertical","margin":"lg","spacing":"sm","contents":[{"type":"box","layout":"baseline","spacing":"sm","contents":[{"type":"text","text":"Place","color":"#aaaaaa","size":"sm","flex":1},{"type":"text","text":"Miraina Tower, 4-1-6 Shinjuku, Tokyo","wrap":true,"color":"#666666","size":"sm","flex":5}]},{"type":"box","layout":"baseline","spacing":"sm","contents":[{"type":"text","text":"Time","color":"#aaaaaa","size":"sm","flex":1},{"type":"text","text":"10:00 - 23:00","wrap":true,"color":"#666666","size":"sm","flex":5}]}]}]},"footer":{"type":"box","layout":"vertical","spacing":"sm","contents":[{"type":"button","style":"link","height":"sm","action":{"type":"uri","label":"CALL","uri":"https://linecorp.com"}},{"type":"button","style":"link","height":"sm","action":{"type":"uri","label":"WEBSITE","uri":"https://linecorp.com"}},{"type":"spacer","size":"sm"}],"flex":0}}})
      </script>
   </body>
</html>