Giter Site home page Giter Site logo

olawolff / wolffchat Goto Github PK

View Code? Open in Web Editor NEW
6.0 7.0 1.0 1.71 MB

O Olá Wolff é uma startup que está querendo facilitar o processo de abertura de empresas no Brasil, e nós utilizamos um bot para isso pois acreditamos que bots são os novos apps. Uma forma natural e intuitiva conversar, tirando dúvidas e talvez formalizar o seu negócio. Para isso construímos um componente em react para conversar com o Microsoft Bot Framework por uma página da web. A necessidade do nosso negócio pedia fazer um projeto do zero, ao invéz de utilizar o [BotFramework-WebChat](https://github.com/Microsoft/BotFramework-WebChat) da Microsoft. No nosso projeto estamos adicionando vários componentes que podem ser úteis também para você, por isso estamos abrindo o código fonte.

Home Page: http://olawolff.com

HTML 0.79% JavaScript 90.44% CSS 8.77%
botframework javascript react microsoft js webclient

wolffchat's Introduction

BotFramework-webchat

About the project / Sobre o projeto

O Olá Wolff é uma startup que está querendo facilitar o processo de abertura de empresas no Brasil, e nós utilizamos um bot para isso pois acreditamos que bots são os novos apps. Uma forma natural e intuitiva conversar, tirando dúvidas e talvez formalizar o seu negócio.

Para isso construímos um componente em react para conversar com o Microsoft Bot Framework por uma página da web. A necessidade do nosso negócio pedia fazer um projeto do zero, ao invéz de utilizar o BotFramework-WebChat da Microsoft. No nosso projeto estamos adicionando vários componentes que podem ser úteis também para você, por isso estamos abrindo o código fonte.

Develop / Desenvolvimento

We use React to develop this Microsoft Bot Framework web client. For you to have everything to start developing, you will need to do this simple steps: Nós utilizamos React para desenvolver o cliente do Microsoft Bot Framework. Para você ter tudo pronto para começar a desenvolver, você vai precisar:

  1. Instalar o npm / Install npm
  2. npm install
  3. npm start

You can use the file /public/index.html as a template for the final file. You will need to pass some data to the bot, as it is showed below: Você pode utilizar o arquivo /public/index.html como template para o arquivo final. Você irá precisar passar alguns dados para o bot. Como mostrado abaixo:

    window.chat = {
        bot_id: "O ID DO SEU BOT", //your bot id
        bot_secret: "A CHAVE DO SEU BOT", //Your bot key
        bot_name: "NOME QUE APARECERÁ NO CHAT" //name that will apper on the webchat
    }
}

Guideline / Guia

You can use this component do build amazing webclients for your bot, but PLEASE, do not use our gradient color anywhere or the avatar for our bot, unless you are contributing direct to our project.

Você pode usar esse componente para construir clientes web para seu bot a vontae, mas POR FAVOR, não utilize a nossa cor em gradiente em nenhum outro lugar ou o avatar para nosso bot. A menos que você esteja contribuindo diretamente para o projeto.

Styling / Estilização

In the /src/styles/ folder you will find the source files for generating the styles. For basic branding, change colors.css to match your color scheme. For advanced styling, change chat.scss.

Na pasta /src/styles/ você irá encontrar o código fonte para gerar os estilos do projeto. Para estilização rápida, mude colors.css para ficar com o esquema de cores do seu projeto. Para estilização avançada, mude o arquivo chat.scss.

You can contribute to Web Chat! / Você pode contribuir com o webchat

  • Report any unreported issues
  • Propose new features
  • Fix an outstanding issue and submit a pull request (please only commit source code, non-generated files)

(Em português)

Copyright & License

© 2018 Olá Wolff

MIT License

wolffchat's People

Contributors

lucasvinco avatar vtnorton avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

vtnorton

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.